Вход
Быстрая регистрация
Если вы у нас впервые: О проекте FAQ
0

Как сделать меню слева в HTML?

BmvMaks [415] 4 года назад

Как сделать обычное меню слева, без наворотов всяких?

4

Для того, чтобы сделать меню слева на Web-странице можно воспользоваться несколькими способами.

Самый простой вариант - использование табличной вёрстки. Создаём таблицу, состоящую из 2 колонок. В 1 колонке будут находится пункты меню, а во 2 колонке - какая-либо информация.

Пункты меню описываем с помощью списка - в HTML для этого служит тег "ul" и вложенные теги "li".

Но я предпочитаю использовать вариант вёрстки с помощью блочных элементов div. Этот вариант и рассмотрим на примере.


Пример создания левого меню в HTML

Создаём 2 элемента div, в первом из них размещаем меню:

<div class="left_menu">

<ul class="menu1">

<li class="li1"><a href="Sheets/page1.html" class="mainmenu1">Имя 1</a></li>

<li class="li1"><a href="Sheets/page2.html" class="mainmenu1">Имя 2</a></li>

<li class="li1"><a href="Sheets/page3.html" class="mainmenu1">Имя 3</a></li>

<li class="li1"><a href="Sheets/page4.html" class="mainmenu1">Имя 4</a></li>

<li class="li1"><a href="Sheets/page5.html" class="mainmenu1">Имя 5</a></li>

</ul>

</div>

<div class="right">

--содержимое--

</div>

Чтобы первый div отображался слева, а второй div - справа, нужно для этих блочных элементов в таблице стилей CSS задать соответствующие свойства.

Описание первого div - .left_menu {float:left; width:24%; margin-left:1%}

Описание второго div - .right {float:right; width:74%}

Свойство float применяется для позиционирования элементов.

Для первого элемента свойство float:left означает, что он будет смещён к левому краю, а для второго элемента свойство float:right - к правому краю.

Что касается ширины width, то она задаётся исходя из специфики и содержимого вашего сайта.

Затем прописываем стили для элементов списка и стили ссылок. Пример из моего собственного архива:

Описание элементов списка - .li1 {background: url(../Img/book_open.png) no-repeat 0 50%; font-size:10pt; font-family:Arial}

Описание ссылок - .mainmenu1 {display:block; text-decoration:none; width:300px; height:35px; line-height:35px; text:indent:50px; padding-left:28px}

После того, как мы задали необходимые свойства в таблице стилей, Web-страница будет выглядеть примерно так:

как сделать меню слева в html

Если не описывать свойства для элементов li и a, то левое меню будет отображаться таким образом:

левое меню html

Вот и всё - таким образом можно сделать меню слева на HTML с помощью CSS.

система выбрала этот ответ лучшим
0

В html можно использовать такую конструкцию:

<nav>

<ul>

<li><a href="url1">пункт меню 1</a></li>

<li><a href="url2">пункт меню 2</a></li>

<li><a href="url3">пункт меню 3</a></li>

</ul>

</nav>

А в css прописать приблизительно такие свойства:

nav ul {

list-style: none;

margin: 0;

padding: 0;

}

nav ul li a {

text-decoration: none;

background: #999; /*Цвет фона пункта меню*/

color: #fff; /*Цвет текста пункта меню*/

text-align: center; /*Текст по центру по горизонтали*/

display: block;

width: 200px; /*Ширина пункта меню*/

height: 30px; /*Высота пункта меню*/

line-height: 30px; /*Высота строки*/

margin-bottom: 2px; /*Отступ снизу от каждого пункта меню*/

}

Получится такое вот меню:

текст при наведении

Для того чтобы при наведении на пункт меню менялся его цвет нужно добавить в CSS такую конструкцию:

nav ul li a:hover{

background: #ccc; /*Цвет при наведении*/

};

0

Если используешь табличную верстку создавай таблицу из 2х колонок левой колонке назначай ширину каторая необходима для меню и размещаешь меню в этой колонке.

Знаете ответ?
Есть интересный вопрос? Задайте его нашему сообществу, у нас наверняка найдется ответ!
Делитесь опытом и знаниями, зарабатывайте награды и репутацию, заводите новых интересных друзей!
Задавайте интересные вопросы, давайте качественные ответы и зарабатывайте деньги. Подробнее..
регистрация
OpenID