slogin.info

ihc 468x60 1 1
Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна0 / 5
 
Автор: Администратор
Просмотров: 1431
Теги: меню, menu, ul li

В этой статье мы расскажем о том, как сделать многоуровневое вертикальное меню. 

Начнём с основ, все мы знаем как делаются простые одноуровневые меню через HTML. По сути такое меню представляет из себя обычный <ul> список, элементами которого являются пункты меню-ссылки. Пример такого простого меню:

<ul>
	<li><a href="/">Первый пункт</a></li>
	<li><a href="/">Второй пункт</a></li>
	<li><a href="/">Третий пункт</a></li>
	<li><a href="/">Четвертый пункт</a></li>
</ul>

В случае, когда мы хотим сделать многоуровневое меню, то нужно так же сделать многоуровневый список. А делается он по следующему принципу, в том <li>, в котором должны быть подпункту меню добавляют ещё одно одноуровневое меню <ul>. В итоге у вас по-умолчанию будет получается вертикальное многоуровневое меню.

Давайте рассмотрим пример:

<ul>
	<li><a href="/">Первый пункт</a>
		<ul>
			<li><a href="/">1.1</a></li>
			<li><a href="/">1.2</a></li>
			<li><a href="/">1.3</a></li>
		</ul>
	</li>
	<li><a href="/">Второй пункт</a></li>
	<li><a href="/">Третий пункт</a>
		<ul>
			<li><a href="/">3.1</a></li>
			<li><a href="/">3.2</a></li>
			<li><a href="/">3.3</a></li>
		</ul>
	</li>
	<li><a href="/">Четвертый пункт</a></li>
</ul>

А вот так это будет выглядеть:

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • ZOMRO
    8.80
  • intuit89
    7.40
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Фиксированное меню при прокрутке страницы

Довольно часто появляется необходимость зафиксировать какой-то блок, меню, или просто картинку при прокрутке страницы. Наприме, у нас так справа зафиксированно предложение к вступлению в команду поддержки сайта.

Теги:

position, menu, ul li, fixed

Комментариев: 0 Подробнее
Создаем многоуровневый, вложенный список

В этой статье мы расскажем о том, как сделать многоуровневый список, или другими словами - вложенный.

Теги:

html, ul li, список, list

Комментариев: 0 Подробнее
Цвет маркеров, разный цвет для текста и маркеров списка

В этой статье мы расскажем о том, как задать цвет маркерам списка, а так же о том, как задать различный цвет для текста пунктов списка и маркеров.

Теги:

css, html, ul li, list, marker

Комментариев: 0 Подробнее

Последнее с форума

ZOMRO аватар
Дарим хорошее настроение и качественный сервис — этого заслуживает каждый наш клиент. Акции, бонусы...
Перейти в тему
ZOMRO аватар
Чем больше — тем дешевле! При заказе услуги VPS или виртуального хостинга и оплате его на длительны...
Перейти в тему
intuit89 аватар
[image] Всем привет! Меня зовут Михаил, я представляю команду, в составе: копирайтер, дизайнер и SM...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.