Css меню вертикальное – Как сделать меню в html и css. Горизонтальное, вертикальное, выпадающее меню готовые коды

Leave a Comment / Css / By /

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

18 ноября, 2015     7 650     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

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

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

Здесь проверял на работоспособность, где будет Demo страница для просмотра.

1. Синий вариант:

2. Зеленый вариант:

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

HTML

Код

<div>
<ul>
  <li><a href=»/»>Партнерские программы</a></li>
  <li><a href=»/»>Рейтинг парт. программ</a></li>
  <li><a href=»/»>Бинарные опционы</a></li>
  <li><a href=»/»>Вопросы и ответы</a></li>
  <li><a href=»/»>Полезные SEO статьи</a></li>
  <li><a href=»/»>SEO словар</a></li>
  <li><a href=»/»>HTML-уроки и советы</a>  
  </li>
</ul>
<div>


CSS

Код

#manugcon-sedenamed {
  clear:left;float:left;width:205px;margin:0 0 0px 0;padding:0;font-size:0.9em
}

#manugcon-sedenamed ul{list-style:none;width:100%;margin:0 0 10px 0;padding:0;font-size:12px
}

#manugcon-sedenamed li{margin-bottom:4px
}

#manugcon-sedenamed li a {
  font-weight: bold;
  height: 20px;
  text-decoration: none;
  color: #215d92;
  display: block;
  padding: 5px 0 0 8px;
  background: #fdfdfd;
  border-left: 5px solid #2a77c3;
}
#manugcon-sedenamed li a:hover {
  background: #2467a9;
  color: #f9f6f6;
  border-left: 5px solid #2a69c3;
}


Материал для создания оригинального шаблона с аналогичной навигацией.

Демонстрация

Вертикальное меню на CSS3 — Многоуровневое

.cd-accordion-menu {

  width: 90%;

  max-width: 600px;

  background: #4d5158;

  margin: 4em auto;

  box-shadow: 0 4px 40px #70ac76;

}

.cd-accordion-menu ul {

  /* by default hide all sub menus */

  display: none;

}

.cd-accordion-menu li {

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}

.cd-accordion-menu input[type=checkbox] {

  /* hide native checkbox */

  position: absolute;

  opacity: 0;

}

.cd-accordion-menu label, .cd-accordion-menu a {

  position: relative;

  display: block;

  padding: 18px 18px 18px 64px;

  background: #4d5158;

  box-shadow: inset 0 -1px #555960;

  color: #ffffff;

  font-size: 1.6rem;

}

.no-touch .cd-accordion-menu label:hover, .no-touch .cd-accordion-menu a:hover {

  background: #52565d;

}

.cd-accordion-menu label::before, .cd-accordion-menu label::after, .cd-accordion-menu a::after {

  /* icons */

  content: »;

  display: inline-block;

  width: 16px;

  height: 16px;

  position: absolute;

  top: 50%;

  -webkit-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  transform: translateY(-50%);

}

.cd-accordion-menu label {

  cursor: pointer;

}

.cd-accordion-menu label::before, .cd-accordion-menu label::after {

  background-image: url(../img/cd-icons.svg);

  background-repeat: no-repeat;

}

.cd-accordion-menu label::before {

  /* arrow icon */

  left: 18px;

  background-position: 0 0;

  -webkit-transform: translateY(-50%) rotate(-90deg);

  -moz-transform: translateY(-50%) rotate(-90deg);

  -ms-transform: translateY(-50%) rotate(-90deg);

  -o-transform: translateY(-50%) rotate(-90deg);

  transform: translateY(-50%) rotate(-90deg);

}

.cd-accordion-menu label::after {

  /* folder icons */

  left: 41px;

  background-position: -16px 0;

}

.cd-accordion-menu a::after {

  /* image icon */

  left: 36px;

  background: url(../img/cd-icons.svg) no-repeat -48px 0;

}

.cd-accordion-menu input[type=checkbox]:checked + label::before {

  /* rotate arrow */

  -webkit-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  transform: translateY(-50%);

}

.cd-accordion-menu input[type=checkbox]:checked + label::after {

  /* show open folder icon if item is checked */

  background-position: -32px 0;

}

.cd-accordion-menu input[type=checkbox]:checked + label + ul,

.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {

  /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/

  /* show children when item is checked */

  display: block;

}

.cd-accordion-menu ul label,

.cd-accordion-menu ul a {

  background: #35383d;

  box-shadow: inset 0 -1px #41444a;

  padding-left: 82px;

}

.no-touch .cd-accordion-menu ul label:hover, .no-touch

.cd-accordion-menu ul a:hover {

  background: #3c3f45;

}

.cd-accordion-menu > li:last-of-type > label,

.cd-accordion-menu > li:last-of-type > a,

.cd-accordion-menu > li > ul > li:last-of-type label,

.cd-accordion-menu > li > ul > li:last-of-type a {

  box-shadow: none;

}

.cd-accordion-menu ul label::before {

  left: 36px;

}

.cd-accordion-menu ul label::after,

.cd-accordion-menu ul a::after {

  left: 59px;

}

.cd-accordion-menu ul ul label,

.cd-accordion-menu ul ul a {

  padding-left: 100px;

}

.cd-accordion-menu ul ul label::before {

  left: 54px;

}

.cd-accordion-menu ul ul label::after,

.cd-accordion-menu ul ul a::after {

  left: 77px;

Как из вертикального меню сделать горизонтальное? — Хабр Q&A

привет всем!
взгляните на мой код. как из этого вертикального меню сделать горизонтальное?
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <div>
     <ul>
         <li><a href="#">punkt1</a>
         <ul>
             <li><a href="#">podpunkt1</a></li>
             <li><a href="#">podpunkt2</a></li>
             <li><a href="#">podpunkt3</a></li>
             <li><a href="#">podpunkt4</a></li>
             <li><a href="#">podpunkt5</a></li>
         </ul>
         </li>
         <li><a href="#">punkt2</a></li>
         <li><a href="#">punkt3</a>
         <ul>
             <li><a href="#">podpunkt1</a></li>
             <li><a href="#">podpunkt2</a></li>
             <li><a href="#">podpunkt3</a></li>
             <li><a href="#">podpunkt4</a></li>
             <li><a href="#">podpunkt5</a></li>
         </ul>
         </li>
         <li><a href="#">punkt4</a></li>
         <li><a href="#">punkt5</a>
         <ul>
             <li><a href="#">podpunkt1</a></li>
             <li><a href="#">podpunkt2</a></li>
             <li><a href="#">podpunkt3</a></li>
             <li><a href="#">podpunkt4</a></li>
             <li><a href="#">podpunkt5</a></li>
         </ul>
         </li>
     </ul>
  </div>
    
</body>
</html>
<code lang="css">
body{
    margin: 0;
    padding: 0;
    font: 1em/1.4em sans-serif;
}


.side{
    width: 200px;
    margin: 30px;
}

a{text-decoration: none;
}

ul{
    margin: 0;
    padding: 0;
    list-style: none;
    }


/*внешний вид меню*/

.menu a{
    background: #3d3d3d;
    color: #fff;
    padding: 10px;
    display: block;
    width: 200px;
    border-bottom: 1px solid #7d7d7d;
    transition: 0.4s all;
    
}

.menu a:hover{
    background: #FF009D;
    color: #fff ;
    padding: 10px 0 20px 20px;   
}

/*всплывающее меню*/

.menu_list{
    position: relative;
}

.menu_drop{
    position: absolute;
    width: 100%;
    left: 110%;
    opacity: 0;
    top: 0;
}

.menu_list:hover .menu_drop{
    opacity: 1;
}
</code>

Интересное вертикальное меню на CSS3

Лого SiteHere.ru