Css вертикальное меню для сайта: Вертикальное меню для сайта — разметка и примеры оформления – Вертикальное меню на CSS

alexxlab

Вертикальное меню на 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;

}

.cd-accordion-menu ul ul ul label,

.cd-accordion-menu ul ul ul a {

  padding-left: 118px;

}

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

  left: 72px;

}

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

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

  left: 95px;

}

@media only screen and (min-width: 600px) {

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

    padding: 24px 24px 24px 82px;

    font-size: 1.9rem;

  }

  .cd-accordion-menu label::before {

    left: 24px;

  }

  .cd-accordion-menu label::after {

&n

Вертикальное меню для сайта с помощью JS и CSS

Вертикальное меню для сайта с помощью JS RUDEBOXВертикальное меню очень полезно, ведь в него может вместиться множество полезной информации. Различными блоками, меню  выполненных в стиле «аккордеон», сейчас уже никого не удивишь. Предлагается масса интересных решений и техник исполнения, как с использованием jQuery, так и основанных только на CSS. В сегодняшнем уроке мы рассмотрим весьма интересное решения построение такого блока навигацией, мы добавим несколько правил анимации, при этом вертикальная навигация будет полностью рабочей и отвечать всем пользовательским запросам.

 

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

Шаг 1. HTML

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

<ul>

<li>

<div><i></i>Интересно<i></i></div>

<ul>

<li><a href=»#»>Photoshop</a></li>

<li><a href=»#»>HTML</a></li>

<li><a href=»#»>CSS</a></li>

<li><a href=»#»>Maquetacion web</a></li>

</ul>

</li>

 

</ul>

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

Вертикальное меню для сайта с помощью JS

Шаг 2. 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

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

.accordion {

width: 100%;

max-width: 360px;

margin: 30px auto 20px;

background: #FFF;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

}

 

.accordion .link {

cursor: pointer;

display: block;

padding: 15px 15px 15px 42px;

color: #4D4D4D;

font-size: 14px;

font-weight: 700;

border-bottom: 1px solid #CCC;

position: relative;

-webkit-transition: all 0.4s ease;

-o-transition: all 0.4s ease;

transition: all 0.4s ease;

}

 

.accordion li:last-child .link {

border-bottom: 0;

}

 

.accordion li i {

position: absolute;

top: 16px;

left: 12px;

font-size: 18px;

color: #595959;

-webkit-transition: all 0.4s ease;

-o-transition: all 0.4s ease;

transition: all 0.4s ease;

}

 

.accordion li i.fa-chevron-down {

right: 12px;

left: auto;

font-size: 16px;

}

 

.accordion li.open .link {

color: #b63b4d;

}

 

.accordion li.open i {

color: #b63b4d;

}

.accordion li.open i.fa-chevron-down {

-webkit-transform: rotate(180deg);

-ms-transform: rotate(180deg);

-o-transform: rotate(180deg);

transform: rotate(180deg);

}

 

.submenu {

display: none;

background: #444359;

font-size: 14px;

}

 

.submenu li {

border-bottom: 1px solid #4b4a5e;

}

 

.submenu a {

display: block;

text-decoration: none;

color: #d9d9d9;

padding: 12px;

padding-left: 42px;

-webkit-transition: all 0.25s ease;

-o-transition: all 0.25s ease;

transition: all 0.25s ease;

}

 

.submenu a:hover {

background: #b63b4d;

color: #FFF;

}

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

Шаг 3. JS

Теперь нам необходимо активировать наше меню, добавив ему функции управления мышью:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

$(function() {

var Accordion = function(el, multiple) {

this.el = el || {};

this.multiple = multiple || false;

 

var links = this.el.find(‘.link’);

links.on(‘click’, {el: this.el, multiple: this.multiple}, this.dropdown)

}

 

Accordion.prototype.dropdown = function(e) {

var $el = e.data.el;

$this = $(this),

$next = $this.next();

 

$next.slideToggle();

$this.parent().toggleClass(‘open’);

 

if (!e.data.multiple) {

$el.find(‘.submenu’).not($next).slideUp().parent().removeClass(‘open’);

};

}

 

var accordion = new Accordion($(‘#accordion’), false);

});

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

Вот и все. Готово!

Читайте также:

Вертикальное фиксированное меню для сайта

Вертикальное фиксированное меню для сайта В последнее время стали весьма популярны неординарные решения к построению сайта, зачастую веб-мастера стали отказываться от привычного построения ресурса и разрабатывать новые концепции верстки. Большое влияние на современный веб дизайн оказал дизайн metro ui который покорил своим минимализмом и простотой решений, что дизайнеры принялись разрабатывать сайты под данный интерфейс. В данном уроке мы рассмотрим как создать фиксированное вертикальное меню в стиле metro ui.

 

Основная идея состоит в том, что меню зафиксировано в левой стороне сайта, и состоит только из иконок, заключенные в небольшой стилизованный контейнер. Кроме этого мы не забываем об адаптации для различных разрешений экрана.  Шрифт и значки, были созданы IcoMoon, а иконки разработал Matthew Skiles.

Шаг 1. HTML

У нас будут ui и li к которым будут присвоенные классы, разделяющие навигацию на несколько сегментов.

<ul>

<li><a href=»#»>Лого</a></li>

<li><a href=»#»>Файлы</a></li>

<li><a href=»#»>Поиск</a></li>

<li><a href=»#»>Редактор</a></li>

<!— Если нужно установить активную вкладку:

<li><a href=»#»>Редактор</a></li>

—>

<li><a href=»#»>Навигация</a></li>

<li><a href=»#»>Изображения</a></li>

<li><a href=»#»>Загрузки</a></li>

</ul>

Кроме этого присутствует возможность подсветки активной вкладки.

Вертикальное фиксированное меню для сайта

Шаг 2. CSS

Несмотря что стили достаточно объемные на самом деле все просто, нам необходимо подключить шрифты и SVG графику, и установить фиксированное значение для навигационной панели. Также мы устанавливаем градиентную заливку для активного элемента и трансформацию перехода в 0.1s.

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

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

@font-face {

font-family: ‘ecoico’;

src:url(‘../fonts/ecoico.eot’);

src:url(‘../fonts/ecoico.eot?#iefix’) format(’embedded-opentype’),

url(‘../fonts/ecoico.woff’) format(‘woff’),

url(‘../fonts/ecoico.ttf’) format(‘truetype’),

url(‘../fonts/ecoico.svg#ecoico’) format(‘svg’);

font-weight: normal;

font-style: normal;

}

 

.cbp-vimenu {

position: fixed;

overflow: hidden;

top: 0;

left: 0;

height: 100%;

list-style-type: none;

margin: 0;

padding: 0;

background: #f7f7f7;

}

 

.cbp-vimenu li a {

display: block;

text-indent: -500em;

height: 5em;

width: 5em;

line-height: 5em;

text-align: center;

color: #999;

position: relative;

border-bottom: 1px solid rgba(0,0,0,0.05);

-webkit-transition: background 0.1s ease-in-out;

-moz-transition: background 0.1s ease-in-out;

transition: background 0.1s ease-in-out;

}

 

.cbp-vimenu li a:hover,

.cbp-vimenu li:first-child a{

background: #47a3da;

color: #fff;

}

 

/* класс активного элемента */

.cbp-vimenu li.cbp-vicurrent a {

background: #fff;

color: #47a3da;

}

 

.cbp-vimenu li a:before {

font-family: ‘ecoico’;

speak: none;

font-style: normal;

font-weight: normal;

text-indent: 0em;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

font-size: 1.4em;

-webkit-font-smoothing: antialiased;

}

 

.cbp-vimenu li a.icon-logo:before {

content: «C»;

font-weight: 700;

font-size: 300%;

font-family: ‘Lato’, Calibri, Arial, sans-serif;

}

 

.icon-search:before {

content: «\e004»;

}

 

.icon-archive:before {

content: «\e005»;

}

 

.icon-download:before {

content: «\e006»;

}

 

.icon-location:before {

content: «\e007»;

}

 

.icon-images:before {

content: «\e009»;

}

 

.icon-pencil:before {

content: «\e008»;

}

 

/* Пример изменения меню для небольших экранов (зависит от общей высоты меню) */

@media screen and (max-height: 34.9375em) {

 

.cbp-vimenu {

font-size: 70%;

}

 

}

Обратите внимание, что мы добавили медиа-запросы для трансформации панели в зависимости от высоты активного окна.

Вот и все. Готово!

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

Читайте также:

Как создать вертикальное меню для сайта

<nav>

<ul>

<li>

<a href=»»>

<i></i>

<strong>Главная</strong>

<small>вернуться домой</small>

</a>

</li>

<li>

<a href=»»>

<i></i>

<strong>О нас</strong>

<small>краткая информация</small>

</a>

</li>

<li>

<a href=»»>

<i></i>

<strong>Избранное</strong>

<small>любимые сайты</small>

</a>

</li>

<li>

<a href=»»>

<i></i>

<strong>Новости</strong>

<small>только самые интересные</small>

</a>

</li>

<li>

<a href=»»>

<i></i>

<strong>Блог</strong>

<small>все, о чем я думаю</small>

</a>

<ul>

<li><a href=»#»><i></i>Новости</a></li>

<li>

<a href=»#»><i></i>Наша команда</a>

<ul>

<li>

<a href=»#»><i></i>Сергей Бондарь</a>

<ul>

<li><a href=»#»><i></i>Проекти</a></li>

<li><a href=»#»><i></i>Контакты</a></li>

</ul>

</li>

<li>

<a href=»#»><i></i>Глеб Кавраский</a>

<ul>

<li><a href=»#»><i></i>Контакты</a></li>

<li><a href=»#»><i></i>Работы</a></li>

</ul>

</li>

<li><a href=»#»><i></i>Давид Барто</a>

<ul>

<li><a href=»#»><i></i>Реклама</a></li>

</ul>

</ul>

</li>

<li><a href=»#»><i></i>Награды</a></li>

<li><a href=»#»><i></i>Контракты</a></li>

</ul>

</li>

<li>

<a href=»»>

<i></i>

<strong>Портфолио</strong>

<small>мои работы</small>

</a>

</li>

<li>

<a href=»»>

<i></i>

<strong>Контакты</strong>

<small>оставайся с нами на связи</small>

</a>

</li>

<li>

<a>

<input type=»text» value=»поиск …»>

<button><i></i></button>

</a>

<a href=»»>

<i></i>

</a>

</li>

</ul>

</nav>

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

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