Многоуровневое css меню горизонтальное: Горизонтальное выпадающее многоуровневое меню

alexxlab

Содержание

Многоуровневое горизонтальное меню на HTML и CSS

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

Делать наше меню заново нету смысла, по-этому сегодня мы просто возьмем за основу “Простое горизонтальное меню”, которое я описывал здесь. Так что вы можете просто скачать исходники нашего меню и дописать всего пару строчек.

HTML

Разметка для нашего меню отличается от исходного только пару строчками, а именно еще одним вложенным списком уже во вложенный ранее список.

<ul>
        <li><a href="#">О нас</a></li>
        <li>
                <a href="#">Статьи</a>
                <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li>
                            <a href="#">jQuery</a>
                            <ul>
                                <li><a href="#">Вступление</a></li>
                                <li><a href="#">Начальный</a></li>
                                <li><a href="#">Продвинутый</a></li>
                            </ul>
                        </li>
                </ul>
        </li>
        <li>
                <a href="#">Видео курс</a>

        </li>
        <li>
                <a href="#">Материалы</a>
        </li>
        <li>
                <a href="#">Форум</a>
        </li>
</ul>

CSS

Стили особого изменения тоже не потерпят. Мы только подвинем наш “вдвойне вложенный” список немного вправо, а все остальное действует аналогично.

#menu {
        padding: 0;
        margin: 0;
        font-family:  Verdana;
        }
#menu li {
        list-style: none;
        float: left;
        height: 30px;
        padding: 0;
        margin: 0;
        width: 150px;
        text-align: center;
        background:  #95DF8E;
        position: relative;
        padding-top: 12px;
        }
#menu li ul{
        list-style: none;
        padding: 0;
        margin: 0;
        width: 150px;
        display: none;
        position: absolute;
        left: 0;
        top: 42px;
        }
#menu li ul li{
        float: none;
        height: 30px;
        margin: 0;
        width: 150px;
        text-align: center;
        background: #95DF8E;
        }
#menu li a{
        display: block;
        width: 150px;
        height: 30px;
        color:    #006A35;
        text-decoration: none;
        }

  #menu li:hover ul{
          display: block;
          }
  #menu li:hover{
          background: #35C835;
          }
  #menu li ul li ul{
    left:150px;
    top: 0;
  }
  #menu li ul li ul li{display: none;}
  #menu li ul li:hover ul li{display: block;}

Готово

Вот и все – наше превращение закончено. Но не увлекайтесь – больше не значит лучше. Подсказка: если в вашем меню не все пункты меню разворачиваются – пометьте те, которые могут развернутся(например, знаком “+”, или картинкой на фоне)

Многоуровневое вертикальное меню HTML и CSS

18 ноября, 2015     11 877     1

На днях быстро нужно было сделать простое многоуровневое меню при помощи только css и html. Потратил на поиски минут 15, чего то подходящего что б не переделывать так и не нашел. По этому решил быстрее написать новое чем чистить чужой код. Вот что получилось

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

ul{
	list-style: none;
	background-color: #484f61;
	width: 200px;
	border: 1px solid #2a323f;
	border-bottom: none;
	color: #fff;
}
ul li{
	border-bottom: 1px solid #2a323f;
	position: relative;
}
ul li:hover{
	background-color: #2a323f;
}
ul li:hover ul{
	display: block;
}
ul li:hover ul li ul{
	display: none;
}
ul li a{
	color: #fff;
	padding: 10px 20px;
	display: block;
	text-decoration: none;
	font-weight: bold;
}
ul li a:hover{
	background-color: #5d99cf;
	color: #fff;
}
ul li ul li:hover ul{
	display: block;
}
ul li ul{
	position: absolute;
	left: 200px;
	top: 0px;
	display: none;
}

ul{ list-style: none; background-color: #484f61; width: 200px; border: 1px solid #2a323f; border-bottom: none; color: #fff; } ul li{ border-bottom: 1px solid #2a323f; position: relative; } ul li:hover{ background-color: #2a323f; } ul li:hover ul{ display: block; } ul li:hover ul li ul{ display: none; } ul li a{ color: #fff; padding: 10px 20px; display: block; text-decoration: none; font-weight: bold; } ul li a:hover{ background-color: #5d99cf; color: #fff; } ul li ul li:hover ul{ display: block; } ul li ul{ position: absolute; left: 200px; top: 0px; display: none; }

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Новости</a></li>
	<li><a href="#">Прайс</a></li>
	<li><a href="#">Услуги</a>
		<ul>
			<li><a href="#">Услуга 1</a></li>
			<li><a href="#">Услуга 2</a></li>
			<li><a href="#">Услуга 3</a>
				<ul>
					<li><a href="#">Услуга 1</a></li>
					<li><a href="#">Услуга 2</a></li>
					<li><a href="#">Услуга 3</a></li>
					<li><a href="#">Услуга 4</a></li>
					<li><a href="#">Услуга 5</a></li>
				</ul>
			</li>
			<li><a href="#">Услуга 4</a></li>
			<li><a href="#">Услуга 5</a></li>
		</ul>
	</li>
	<li><a href="#">Контакты</a></li>
</ul>

<ul> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Новости</a></li> <li><a href=»#»>Прайс</a></li> <li><a href=»#»>Услуги</a> <ul> <li><a href=»#»>Услуга 1</a></li> <li><a href=»#»>Услуга 2</a></li> <li><a href=»#»>Услуга 3</a> <ul> <li><a href=»#»>Услуга 1</a></li> <li><a href=»#»>Услуга 2</a></li> <li><a href=»#»>Услуга 3</a></li> <li><a href=»#»>Услуга 4</a></li> <li><a href=»#»>Услуга 5</a></li> </ul> </li> <li><a href=»#»>Услуга 4</a></li> <li><a href=»#»>Услуга 5</a></li> </ul> </li> <li><a href=»#»>Контакты</a></li> </ul>

Вам также может понравиться

CSS горизонтальное меню с 3-м подменю отображается вертикально



Это многоуровневое горизонтальное меню. Я пытаюсь сделать подменю 3-го уровня вертикальным (1-й &-й уровень останется горизонтальным)

Поэтому, если я наведу указатель мыши на продукты, он будет содержать список жестких дисков, мониторов и динамиков… горизонтально. Однако, когда я навожу колонки, теперь они должны перечислять 10 Уолтов, 20 Уолтов … вертикально, как выпадающий список.

Можно ли это сделать? Пожалуйста помочь.

<style>
    /**
     * horizontal navigation (SO)
     */
    body {
        background: url('.jpg') 50% 50%;
    }

    /* Targeting both first and second level menus */

    #nav {position: relative;}
    #nav li {
        list-style:none;
        float: left;
    }
    #nav li a {
        display: block;
        padding: 8px 12px;
        text-decoration: none;
    }
    #nav li a:hover {
        background-color:red;
        color:#FFF;
        opacity:1;
    }

    /* Targeting the first level menu */
    #nav {  
        top:150px;
        min-width:850px;
        background:#fff;
        opacity:0.5;
        display: block;
        height: 34px;
        z-index: 100;
        position: absolute;
    }
    #nav > li > a {
    }

    /* Targeting the second level menu */
    #nav li ul {
        color: #333;
        display: none;
        position: absolute; 
        width:850px;
    }
    #nav li ul li {
        display: inline;
    }
    #nav li ul li a {
        background: #fff;
        border: none;
        line-height: 34px;
        margin: 0;
        padding: 0 8px 0 10px;
    }
    #nav li ul li a:hover {
        background-color:red;
        color:#FFF;
        opacity:1;
    }

    /* Third level menu */
    #nav li ul li ul{
        top: 0;
    }
    ul.child {
    background-color:#FFF;  
    }
    /* A class of current will be added via jQuery */
    #nav li.current > a {
        background: #f7f7f7;
        float:left;
    }
    /* CSS fallback */
    #nav li:hover > ul.child {
        left:0;
        top:34px;
        display:inline;
        position:absolute;
        text-align:left;
    }
    #nav li:hover > ul.grandchild  {
        display:block;
    }

</style>


<!-- content to be placed inside <body>…</body> -->
<ul>
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Products</a>
        <ul>
            <li><a href="#">Hard Drives</a></li>
            <li><a href="#">Monitors</a></li>
            <li><a href="#">Speakers</a>
                <ul>
                    <li><a href="#">10 watt</a></li>
                    <li><a href="#">20 watt</a></li>
                    <li><a href="#">30 watt</a></li>
                </ul>
            </li>
            <li><a href="#">Random Equipment</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Services</a>
        <ul>
            <li><a href="#">Repairs</a></li>
            <li><a href="#">Installations</a></li>
            <li><a href="#">Setups</a></li>
        </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

jsFiddle демо: http://jsfiddle.net/fJQ59/

css
Поделиться Источник Milacay    
28 декабря 2012 в 18:07

2 ответа

  • ASP.NET горизонтальное меню с подменю, появляющимся ниже, также горизонтальное

    У меня есть горизонтальное меню с UL/LI markup, которое я хочу преобразовать в ASP:Menu в .net 3.5. Я бы хотел, чтобы выбор в подменю отображался в горизонтальном меню под главным меню при нажатии на пункт главного меню. Я тоже хочу: укажите, какой пункт меню выбран, выделив / выделив жирным…

  • CSS выпадающее меню — неверный размер подменю

    Я делаю горизонтальное навигационное меню css. Как я могу сделать так, чтобы ширина подменю автоматически подстраивалась под его содержимое? как в главном меню, совсем. Мой css: http://pastebin.com/Kpx4s3fH Текст просто складывается обратно. EDIT: и html http://pastebin.com/xaC0kvud


1

Добавьте в свой стиль следующие коды

#nav li ul li ul li { display: block; float: none; }

Поделиться Mayki Nayki     28 декабря 2012 в 18:23


1

Вот отправная точка для вас:

HTML 

​<ul>
  <li>
    Option One
    <ul>
      <li>
        Second Row One
        <ul>
          <li>
            Third Row One
          </li>
          <li>
            Third Row Two
          </li>
          <li>
            Third Row Three
          </li>
        </ul>
      </li>
      <li>
        Second Row Two
      </li>
      </ul>   
  </li>
  <li>
    Option Two
  </li>
  <li>
    Option Three
  </li>
</ul>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS 

ul {
  width: 600px;
  list-style-type: none;
}
ul > li,
ul > li > ul > li {
  position: relative;
  float: left;
  padding: 3px 5px;
  margin: 10px 5px;
  cursor: pointer;
}

/*****************************
This next line is the key to
making the third row vertical:
******************************/
ul ul ul li {
  float: none;
}

li > ul {
  display: none;
}
li:hover > ul {
  position: absolute;
  display: block;
  width: 600px;
}
​

Посмотреть на JSFiddle

Поделиться jamesplease     28 декабря 2012 в 18:23

Похожие вопросы:


Горизонтальное подменю вертикальное меню с помощью Bootstrap

Есть ли способ создать горизонтальное подменю для вертикальной структуры меню с помощью bootstrap я не видел ни одного подменю с вертикальной ориентацией главного меню. Примерная структура структуры…


css горизонтальное навигационное меню плавает справа, вертикальные подменю не выровнены с главным меню

Я создал горизонтальное навигационное меню в css, плавающее слева. Это прекрасно работает. Когда я меняю поплавок вправо (и меняю порядок li верхнего уровня), все в порядке, за исключением того, что…


CSS выпадающее меню с горизонтальным подменю

У меня есть следующий сайт http://jsfiddle.net/Me4fw/4/ , на котором я пытаюсь реализовать горизонтальное выпадающее меню css, имеющее подменю, которое также является горизонтальным. Я перепробовал…


ASP.NET горизонтальное меню с подменю, появляющимся ниже, также горизонтальное

У меня есть горизонтальное меню с UL/LI markup, которое я хочу преобразовать в ASP:Menu в .net 3.5. Я бы хотел, чтобы выбор в подменю отображался в горизонтальном меню под главным меню при нажатии…


CSS выпадающее меню — неверный размер подменю

Я делаю горизонтальное навигационное меню css. Как я могу сделать так, чтобы ширина подменю автоматически подстраивалась под его содержимое? как в главном меню, совсем. Мой css:…


CSS Горизонтальное Подменю

в основном у меня есть бок о бок горизонтальное меню, как вы можете видеть здесь: http://www.дополнения-today.co.uk/walnutgarth4/availability.php то, что я пытаюсь сделать, это сделать так, чтобы…


html горизонтальное меню отображается вертикально на firefox 4

я только что пошел тестировать сайт в firefox 4 (бета-версия 10), и горизонтальное меню отображается вертикально. В chrome меню горизонтально, как это: но в firefox 4 он появляется вот так: Я…


Горизонтальное меню с вертикальным подменю

Мне нужно горизонтальное меню с вертикальными подменю , которые взяты из базы данных сервера SQl, мне нужно вертикальное подменю с полосами прокрутки, может кто-нибудь дать мне ссылку на такое меню.


css подменю меню горизонтальное

Как я могу создать css меню и подменю, как это. Когда я щелкаю или перемещаю мышь по меню, оно имеет маленький значок внизу


CSS подменю меню не отображается

У меня возникла проблема CSS с меню на старом сайте, над которым недавно работали. Проблема в том, что подменю под главным меню отображается как очень тонкая линия без возможности выбрать какой-либо…

Выпадающее меню

Навигация в виде выпадающего меню может применяться при большом количестве ссылок, для экономии места на странице. Выпадающее вертикальное меню корректно отображается в браузерах Firefox, Opera и Internet Explorer. Автор меню мне неизвестен, поэтому и ссылки на оригинал не имеется.

<!—[if gte IE 5.5]>
<script language=»JavaScript» src=»nav-h.js» type=»text/JavaScript»></script>
<![endif]—>

Скачать JavaScript

<ul>
<li><a href=»index.html»>Главная</a></li>
<li><a href=»templates.html»>Шаблоны, рецепты +</a>
<ul>
<li><a href=»templates.html»>Шаблоны, заготовки +</a>
<ul>
<li><a href=»temp1.html»>Шаблон 1</a></li>
<li><a href=»temp2.html»>Шаблон 2</a></li>
<li><a href=»temp3.html»>Шаблон 3</a></li>
<li><a href=»temp4.html»>Шаблон 4</a></li>
<li><a href=»temp5.html»>Шаблон 5</a></li>
<li><a href=»temp6.html»>Шаблон 6</a></li>
<li><a href=»temp7.html»>Шаблон 7</a></li>
<li><a href=»temp8.html»>Шаблон 8</a></li>
</ul>
</li>
<li><a href=»faq.html»>Рецепты HTML</a></li>
<li><a href=»faq-css.html»>Рецепты CSS</a></li>
</ul>
</li>
<li><a href=»#»>Менюшки +</a>
<ul>
<li><a href=»#»>Вертикальные +</a>
<ul>
<li><a href=»menu1.html»>Вертикальное меню 1</a></li>
<li><a href=»menu2.html»>Вертикальное меню 2</a></li>
<li><a href=»menu3.html»>Вертикальное меню 3</a></li>
<li><a href=»menu4.html»>Вертикальное меню 4</a></li>
<li><a href=»menu5.html»>Вертикальное меню 5</a></li>
</ul>
</li>
<li><a href=»#»>Горизонтальные +</a>
<ul>
<li><a href=»menu6.html»>Горизонтальное меню 1</a></li>
<li><a href=»menu7.html»>Горизонтальное меню 2</a></li>
<li><a href=»menu8.html»>Горизонтальное меню 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=»/gb»>Гостевая книга</a></li>
<li><a href=»submit.html»>Контакт</a></li>
</ul>

ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
}

ul#navmenu-v:after {
clear: both;
display: block;
font: 1px/0px serif;
content: «.»;
height: 0;
visibility: hidden;
}

ul#navmenu-v li {
float: left;
display: block !important;
display: inline;
position: relative;
}

ul#navmenu-v a {
border: 1px solid #FFF;
border-right-color: #527337;
border-bottom-color: #527337;
padding: 0 6px;
display: block;
background: #A2C585;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%;
}

ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li.iehover a {
background: #648B43;
color: #FFF;
}

ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
background: #648B43;
color: #BCD6A7;
}

ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
background: #648B43;
color: #FFF;
}

ul#navmenu-v li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li a {
background: #648B43;
color: #BCD6A7;
}

ul#navmenu-v li:hover li:hover li a:hover,
ul#navmenu-v li:hover li:hover li:hover a,
ul#navmenu-v li.iehover li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover a {
background: #648B43;
color: #FFF;
}

ul#navmenu-v li:hover li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li.iehover li a {
background: #648B43;
color: #BCD6A7;
}

ul#navmenu-v li:hover li:hover li:hover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover li a:hover {
background: #648B43;
color: #FFF;
}

ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}

ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
display: none;
}

ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
display: block;
}

горизонтальное » Скрипты для сайтов

8 074 Скрипты / Menu & Nav

Эффект зачеркивания при наведении в меню

Эффект зачеркивания при наведении на пункт в горизонтальном меню. Наиболее эффектно будет смотреться на лендингах, где горизонтальное меню расположено поверх фонового изображения.

5 737 Скрипты / Menu & Nav

Гибкое горизонтальное меню

Небольшой скрипт, который поможет в создании более эстетического адаптивного горизонтального меню. Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню — «три точки». Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.

6 067 Скрипты / Menu & Nav

Диагональное меню на CSS

Используя возможности CSS3 в этом уроке сделаем диагональное меню, и напишем media queries, чтобы придать ему адаптивности.

2 912 Скрипты / Menu & Nav

Горизонтальное меню на CSS3

Симпатичное горизонтальное CSS3 меню с всплывающими пунктами при наведении.

5 352 Скрипты / Menu & Nav

Выпадающее меню на CSS3

Горизонтальное меню с выпадющими подпунктами с использованием css3.

3 184 Скрипты / Menu & Nav

Размытое меню на CSS3

Простое горизонтальное меню с эффектом размытия и с элементом адаптивности. Используется CSS3 и HTML5.

3 071 Скрипты / Menu & Nav

HorizontalNav — горизонтальная навигация

JQuery плагин, позволяющий сделать горизонтальную навигацию, которая будет занимать всю ширину контейнера в котором находится. Добавлена также и поддержка IE7.

4 203 Скрипты / Menu & Nav

Горизонтальное меню с выпадающими подпунктами

Горизонтальное меню с выпадающими подпунктами. Выпадающие элементы используют jQuery, все остальное оформлено на CSS. В демо включен практически макет сайта, осталось только заполнить центральную часть контентом и нарисовать красивую шапку. Но можно использовать и только саму идею меню.

2 139 Скрипты / Menu & Nav

Меню с эффектом подпрыгивания

Интересное подпрыгивающее меню (bounce), сделанное с помощью псевдо элементов и пользовательских атрибутов на CSS3. В примере простое горизонтальное и горизонтальное с выпадающими под пунктами меню.

3 133 Скрипты / Menu & Nav

Многоуровневое выпадающее меню

Многоуровневое выпадающее меню на CSS2. При этом работает оно в IE5.5, IE6, IE7, IE8, Firefox, Opera, Safari(PC) и Google Chrome.

2 206 Скрипты / Menu & Nav

Многоцветное меню на CSS3

Горизонтальное выпадающее меню, фишка которого состоит в том, что выпадающие блоки могут изменять цвет на тот, по какому из цветных квадратиков вы щелкните мышкой. При этом смена цвета реализована на CSS, а не на jаvascript.

2 871 Скрипты / Menu & Nav

Выпадающее CSS3 меню

Выпадающее меню на CSS3 сделанное на базе UI созданного Владимиром Кудиновым.

Адаптивное многоуровневое меню на CSS

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

Так что решил отдельным материалом его поставить, так как подключил шрифтовые иконки и немного изменил дизайн. Если говорить о первом многозначном панели и также горизонтального меню, то вы можете посмотреть и выбрать, какое вам больше подойдет или понравится, в общем как посчитаете для себя. Что по кнопкам, сильно не выбирал по тематическому наклонению, а просто поставил, чтоб видно было в работе способности и визуально они присутствуют. Цвет вы сами поставите на основу, здесь он идет темный, если по вашей стилистике не подходит, то меняем в стилях, которые нужно скачать и потом поместить в CSS.

Возможно у кого то возникнет вопрос, для чего его ставить?

Но это вам решать, быть ему на интернет ресурсе или нет, просто если возьмем и поставим стандартный шаблон он конструктора и там сразу заменим вверх, то вы уже увидите какое изменение будет. Так вы можете собрать свой неповторимый и уникальный сайт.

Имеет ли смысл ставить сюда мини профиль?

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

Будет стандартный шаблон адаптивный с этой панелью?

Да полностью будет адаптивен и корректно отображаться на всех размерах монитора и экрана, если говорить о мобильных аппаратах.

Что даст изменение на портале?

Если говорить о стандартном, то вы уже имеете в панели поиск и название и навигацию, а там только будет горизонтальное меню. И от сюда можно с уверенностью сказать, что более функционален станет и сам стиль изменится.

Это изображение под разными функциями и размерами.

Делал для главного как афишу, но нашел другой, не пропадать, будет здесь.

Когда поставите, то так визуально будет все выглядеть.

Это вы если зайдете на сайт с мобильного устройства.

Приступаем к установке:

Здесь подключены шрифтовые иконки в самом верху кода, это стили, что будут выводить их. А так копируем и ставим вверх сайта, прежде от туда все нужно снести.

Код

<header>
<link rel=»stylesheet» href=»//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css»>  
<div>  
<div>  
<div><a href=»/»>ZORNET.RU</a></div>  
<div>  
<nav>  
<div><ul>  
<li><a href=»/»><span><i aria-hidden=»true»></i> Главная</span></a></li>  
<li><a href=»zornet.ru/load/81″><span><i aria-hidden=»true»></i> Скрипты</span></a></li>  
<li><a href=»zornet.ru/load/142″><span><i aria-hidden=»true»></i> Шаблоны</span></a></li>  
<li><a href=»zornet.ru/index/0-3″><span><i aria-hidden=»true»></i> Обратная связь</span></a></li>  
<li><a href=»http://#»><span><i aria-hidden=»true»></i> Еще категорий</span></a><ul>  
<li><a href=»/»><span><i aria-hidden=»true»></i> Категория новость</span></a></li>  
<li><a href=»/»><span><i aria-hidden=»true»></i> Категория файлы</span></a></li>  
<li><a href=»/»><span><i aria-hidden=»true»></i> Категория блог</span></a></li>  
<li><a href=»/»><span><i aria-hidden=»true»></i> Гостевая книга</span></a></li>  
<li><a href=»/»><span><i aria-hidden=»true»></i> О компаний</span></a></li></ul></li></ul></div>  
</nav>  
<div><div><span></span><span></span><span></span></div></div>  
</div>  
<div>  
<div>  
<form onsubmit=»this.sfSbm.disabled=true» method=»get» action=»/search/»>  
<input type=»submit» name=»sfSbm» value=»»>  
<input type=»text» size=»20″ maxlength=»40″ name=»q» value=»Поиск по сайту…» onfocus=»if(this.value == ‘Поиск по сайту…’){this.value = »}» onblur=»if(this.value == »){this.value = ‘Поиск по сайту…’}»>  
</form>  
</div>  
</div>  
</header>


Стили идут в текстовом документе, нажимаем скачать и они появятся, что копируем и ставим в CSS и все сохранить не забыть.

Создаем горизонтальное меню CSS

В этой статье мы рассмотрим, как создать горизонтальное меню для сайта с помощью HTML и CSS. Чтобы получить интерактивное меню, нужно использовать JQuery, HTML 5 и CSS3.

Создаем горизонтальное меню CSS

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

Шаг 1: Откройте любой HTML — редактор и напишите код HTML с элементами списка ul-li и сохраните файл с расширением .html:

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Horizontal CSS Menu Bar</title>
<body>
<ul id=”menu”>
    <li><a href=”#”>Link1</a></li>
    <li><a href=”#”>Link2</a>
          <ul>
            <li><a href=”#”>Link2.1</a></li>
            <li><a href=”#”>Link2.2</a></li>
            <li><a href=”#”>Link2.3</a></li>
         </ul>
    </li>
    <li><a href=”#”>Link3</a>
          <ul>
          <li><a href=”#”>Link3.1</a></li>
          <li><a href=”#”>Link3.2</a></li>
          </ul></li>    
    <li><a href=”#”>Link4</a></li>
</ul>
</body>
</html>

Теперь, если вы откроете эту HTML — страницу в браузере, она будет выглядеть, как показано ниже. Далее мы добавим CSS код для позиционирования горизонтального меню с подменю для сайта.

• Link1
• Link2
o Link2.1
o Link2.2
o Link2.3
• link3
o Link3.1
o Link3.2
• link4

Шаг 2: Здесь мы добавляем CSS в HTML разметку. Этот тип CSS кода называется внутренним. Во внешнем CSS мы размещаем код в отдельном файле, сохраняя его с расширением .css и подключая на странице HTML. Преимущество использования внешнего CSS заключается в его многократном использовании. Чтобы сделать его проще, мы добавили внутренний CSS. Для этого разместите тег <style> под head в HTML и напишите CSS код внутри блока <style>. Для начала мы добавим несколько основных свойств, чтобы установить ширину, высоту, цвет фона:

<style>
/* Main */
    #menu{
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;  
    background: #111;
    }
</style>

После добавления CSS:

Шаг 3: Теперь закруглите угол, чтобы придать ему красивый внешний вид. Для этого используйте свойство CSS border-radius и установите значение 50px:

#menu{
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;  
    background: #111;
    border-radius: 50px;
}

После добавления CSS:

Он выглядит лучше, правда?

Шаг 4: Теперь упорядочим структуру будущего горизонтального резинового меню для сайта. Все элементы ‘li’ будут находиться в одной строке, а все элементы ‘ul’ будут располагаться ниже:

#menu li{
    float: left;
    padding: 0 0 10px 0;
    position: relative; 
}

После добавления CSS:

Шаг 5: Настроим свойства для тега ‘a’ (при наведении курсора мыши) такие как цвет, оформления текста, шрифт:

#menu a{
    float: left;
    height: 25px;
    padding: 0 25px;
    color: #CC6600;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000; 
}

После добавления CSS:

Шаг 6: Добавьте еще одно свойство, чтобы цвет ссылок изменялся при нажатии:

#menu li:hover > a{
    color: #CC3333; 
}

Шаг 7: Теперь добавьте два CSS блока для элементов ‘ul’. Первый блок будет скрывать все элементы ‘ul’, также необходимо задать такие свойства отображения как цвет, внутренний отступ, позиция. Второй блок — для отображения всех элементов ‘ul’ при наведении курсора мыши на элементы ‘li’:

#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    background: #222; }
   #menu li:hover > ul{
    display: block; 
}

После добавления CSS:

Шаг 8: Установите padding (внутренний отступ) 0, margin (внешний отступ) 0 для всех элементов, чтобы многоуровневое горизонтальное меню для сайта лучше смотрелось:

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block; 
}

Шаг 9: Установите свойства для всех элементов ‘а’, которые располагаются под тегом ‘ul’:

#menu ul a{    
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
 }

Шаг 9: Добавьте еще несколько строк, чтобы улучшить визуальные эффекты оригинального горизонтального меню для сайта, установите правильный размер шрифта для черного фона:

#menu:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ” “;
    clear: both;
    height: 0;
 }

После добавления CSS:

На этом все. Мы успешно создали горизонтальное меню. Теперь добавим еще несколько строк, чтобы придать нашей панели меню более профессиональный вид.

Дополнительный шаг 1: Для отображения указателя под выделенной ссылкой добавьте код, представленный ниже:

#menu ul li:first-child a:after{
    content: ”;
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #FF0000;
}

После добавления CSS:

Дополнительный шаг 2: Установите свойство border-radius 5px под элементом ‘#menu ul’, который придаст небольшое закругление для всех тегов ul:

После добавления CSS:

Мы могли бы добавить еще больше свойств, чтобы придать меню более профессиональный вид. Но это наше первое горизонтальное меню для сайта, поэтому не будем усложнять его. Если у вас есть какие — либо вопросы, задайте их нам.

Данная публикация является переводом статьи «Create horizontal menu bar using HTML and CSS» , подготовленная редакцией проекта.

Многоуровневая навигация на чистом CSS — menu.css

Автор: Craigerskine
Просмотров Всего: 13,636 просмотров
Официальная страница: Перейти на сайт
Последнее обновление: 30 января 2020
Лицензия: MIT

Предварительный просмотр:

Описание:

меню.css — это крошечная библиотека CSS для создания многоуровневых (до 4) горизонтальных выпадающих меню или вертикально расширяющихся меню без какого-либо JavaScript.

Как пользоваться:

1. Импортируйте таблицу стилей menu.css в файл HTML.

2. Создайте горизонтальное раскрывающееся меню из списка навигации.

3.Создайте вертикальное раскрывающееся меню из списка навигации следующим образом:
Теги: раскрывающееся меню

javascript — горизонтальное многоуровневое меню только на основе CSS

Я динамически генерирую многоуровневое меню и хочу, чтобы это меню отображалось правильно без использования какого-либо JavaScript jQuery, на данном этапе меню только двухуровневое.

Ниже представлена ​​структура меню, генерируемая динамически

Многоуровневая работа с JS https://codepen.io/anon/pen/RMrqmQ

Мне нужен указатель на хороший пример, я посмотрел, например, но все они имеют класс, определенный для UL & li, в то время как мое динамическое меню ul..li очищено, чтобы пользователь мог настроить его на основе требований

ОБНОВЛЕНИЕ

Работает с codepen, вроде работает хорошо https: // codepen.io / anon / pen / bvEzwe

  .nav ul {
  стиль списка: нет;
  цвет фона: # 444;
  выравнивание текста: центр;
  отступ: 0;
  маржа: 0;
}

.nav li {
  семейство шрифтов: «Освальд», без засечек;
  размер шрифта: 1.2em;
  высота строки: 40 пикселей;
  выравнивание текста: слева;
}

.nav a {
  текстовое оформление: нет;
  цвет: #fff;
  дисплей: блок;
  отступ слева: 15 пикселей;
  нижняя граница: 1px solid # 888;
  переход: .3s цвет фона;
}

.nav a: hover {
  цвет фона: # 005f5f;
}

.nav a.active {
  цвет фона: #aaa;
  цвет: # 444;
  курсор: по умолчанию;
}

/ * Подменю * /
.nav li li {
  размер шрифта: .8em;
}


@media screen и (min-width: 650px) {
  .nav li {
    ширина: 130 пикселей;
    нижняя граница: нет;
    высота: 50 пикселей;
    высота строки: 50 пикселей;
    размер шрифта: 1.4em;
    дисплей: встроенный блок;
    margin-right: -4px;
  }

  .nav a {
    нижняя граница: нет;
  }

  .nav> ul> li {
    выравнивание текста: центр;
  }

  .nav> ul> li> a {
    отступ слева: 0;
  }

  / * Подменю * /
  .nav li ul {
    позиция: абсолютная;
    дисплей: нет;
    ширина: наследовать;
  }

  .nav li: hover ul {
    дисплей: блок;
  }

  .nav li ul li {
    дисплей: блок;
  }
}

javascript — горизонтальное многоуровневое меню начальной загрузки

javascript — горизонтальное многоуровневое меню начальной загрузки — qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 32к раз

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

Создан 16 окт.

СебастьянСебастьян

3,9991313 золотых знаков6161 серебряный знак121121 бронзовый знак

CSS

  .dropdown-submenu {
    положение: относительное;
}
.dropdown-submenu> .dropdown-menu
{
    верх: 0;
    осталось: 100%;
    маржа сверху: -6 пикселей;
    маржа слева: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    радиус границы: 0 6px 6px 6px;
}
.dropdown-submenu: hover> .dropdown-menu {
    дисплей: блок;
}

.dropdown-submenu> a: after {
    дисплей: блок;
    содержание:" ";
    float: right;
    ширина: 0;
    высота: 0;
    цвет границы: прозрачный;
    стиль границы: сплошной;
    ширина границы: 5 пикселей 0 5 пикселей 5 пикселей;
    цвет границы слева: #cccccc;
    маржа сверху: 5 пикселей;
    margin-right: -10px;
}

.dropdown-submenu: hover> a: after {
    цвет границы слева: #ffffff;
}

.dropdown-submenu .pull-left {
    float: нет;
}

.dropdown-submenu.pull-left> .dropdown-menu {
    осталось: -100%;
    маржа слева: 10 пикселей;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    радиус границы: 6px 0 6px 6px;
}

.root: hover .dropdown-menu {
    дисплей: блок;
}

Некоторые рабочие примеры Jsfiddle

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *