Как сделать меню слева в HTML?
Как сделать обычное меню слева, без наворотов всяких?
Для того, чтобы сделать меню слева на Web-странице можно воспользоваться несколькими способами.
Самый простой вариант — использование табличной вёрстки. Создаём таблицу, состоящую из 2 колонок. В 1 колонке будут находится пункты меню, а во 2 колонке — какая-либо информация.
Пункты меню описываем с помощью списка — в HTML для этого служит тег "ul" и вложенные теги "li".
Но я предпочитаю использовать вариант вёрстки с помощью блочных элементов div. Этот вариант и рассмотрим на примере.
Пример создания левого меню в HTML
Создаём 2 элемента div, в первом из них размещаем меню:
Чтобы первый div отображался слева, а второй div — справа, нужно для этих блочных элементов в таблице стилей CSS задать соответствующие свойства.
Описание первого div — .left_menu
Описание второго div — .right
Свойство float применяется для позиционирования элементов.
Для первого элемента свойство float:left означает, что он будет смещён к левому краю, а для второго элемента свойство float:right — к правому краю.
Что касается ширины width, то она задаётся исходя из специфики и содержимого вашего сайта.
Затем прописываем стили для элементов списка и стили ссылок. Пример из моего собственного архива:
Описание ссылок — .mainmenu1
После того, как мы задали необходимые свойства в таблице стилей, Web-страница будет выглядеть примерно так:
Если не описывать свойства для элементов li и a, то левое меню будет отображаться таким образом:
Вот и всё — таким образом можно сделать меню слева на HTML с помощью CSS.
CSS меню
Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню — раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.
Вертикальное меню
Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент <li> нашего списка будет содержать по одной ссылке:
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента <a> со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.
Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.
Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:
При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.
Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:
Горизонтальное меню
В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.
Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов <li> нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:
Выпадающее меню
Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.
Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:
Подпункты мы разместим в отдельном списке, вложив его в элемент <li>, который содержит родительскую ссылку относительно подпунктов. Теперь мы имеем четкую структуру нашей будущей панели навигации:
Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент <li> список снова был преобразован в блочный элемент:
Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.
Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.
Высота для родительского списка была добавлена специально, так как браузеры не учитывают в качестве содержимого элемента плавающий контент, то без добавления высоты наш список будет проигнорирован браузером и контент, следующий за списком, будет обтекать наше меню.
Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:
Как сделать — меню с фиксированной боковой навигацией
Узнайте, как создать меню с фиксированной боковой навигацией с помощью CSS.
Создание фиксированной боковой панели
Шаг 1) добавить HTML:
Пример
Шаг 2) добавить CSS:
Пример
/* The sidebar menu */
.sidenav <
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 160px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #111; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
>
/* The navigation menu links */
.sidenav a <
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
>
/* When you mouse over the navigation links, change their color */
.sidenav a:hover <
color: #f1f1f1;
>
/* Style page content */
.main <
margin-left: 160px; /* Same as the width of the sidebar */
padding: 0px 10px;
>
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) <
.sidenav
>
Совет: Чтобы узнать больше о навигационных панелях, перейдите в наш учебник CSS Navigation.
Совет: Чтобы узнать, как создать анимированную, закрывающуюся боковую навигацию, перейдите в руководство по навигации.