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


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

 

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


Шаг 1. HTML

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

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

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

Шаг 2. CSS

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

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

Шаг 3. JS

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

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


www.rudebox.org.ua

Вертикальное меню делается на основе списка, маркированного или нумерованного. По умолчанию все элементы списка <li>...</li> располагаются вертикально, занимая по ширине всю ширину элемента контейнера <ul>...</ul>, который в свою очередь занимает всю ширину его блока-контейнера.

Элементы списка <li>...</li> могут содержать не только ссылки, но также заголовки, иконки, картинки. С помощью вертикального меню можно оформлять комментарии на сайте, список категорий и т.д.

Перейти на страницу с примерами

  • Содержание:
  • 1. Вертикальное меню с заголовком
  • 2. Вертикальное меню в стиле «схема метро»
  • 3. Вертикальное меню с эффектами при наведении
  • 4. Вертикальное меню с иконками
  • 5. Вертикальное меню с картинками

1. Вертикальное меню с заголовком

Простой элегантный вариант оформления. Подходит для стилизации категорий на сайте. При наведении элемент списка меняет цвет ссылки.

<div class="widget">   <h3 class="widget-title">Категории</h3>   <ul class="widget-list">   <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>  </div>

* {box-sizing: border-box; margin: 0;}  .widget {   padding: 20px 30px;   background: white;   font-family: 'Roboto', sans-serif;  }  .widget-title {   text-transform: uppercase;   letter-spacing: 2px;   color: #222;   font-size: 16px;   padding-left: 15px;   margin-bottom: 15px;   border-left: 2px solid #b99d61;  }  .widget-list {   padding: 0;   list-style: none;  }  .widget-list a:before {   content: "2014";   margin-right: 14px;  }  .widget-list a {   text-decoration: none;   outline: none;   display: block;   padding: 6px 0;    letter-spacing: 1px;   font-weight: 300;   color: #444;   transition: .3s linear;  }  .widget-list a:hover {color: #b99d61;}

2. Вертикальное меню в стиле «схема метро»

Интересное решение для оформления вертикального меню, предусмотрено добавление вложенных меню. «Ветка метро» — левая граница списка, маркеры генерируются перед каждой ссылкой.

<ul class="metro">   <li><a href="">Элемент списка</a>   <ul>   <li><a href="">Элемент вложенного списка</a></li>   <li><a href="">Элемент вложенного списка</a></li>   <li><a href="">Элемент вложенного списка</a></li>   </ul>   </li>   <li><a href="">Элемент списка</a></li>   <li><a href="">Элемент списка</a></li>  </ul>

.metro {   list-style: none;   padding: 0;   margin: 30px 0 0 50px;   border-left: 5px solid #DAE4F1;  }  .metro li {line-height: 2em;}  .metro ul {   margin: 20px 0 20px 15px;   padding: 0;   border: none;   list-style: none;  }  .metro ul:before, .metro ul:after {   content: "";   width: 5px;   height: 28px;   background: #DAE4F1;   position: relative;   display: block;   left: -9px;  }  .metro ul:before {   transform: rotate(-45deg);   margin-top: -15px;  }  .metro ul:after {   transform: rotate(45deg);   bottom: -20px;  }  .metro ul li {border-left: 5px solid #DAE4F1;}  .metro ul li:first-child {   margin-top: -5px;   padding-top: 5px;  }  .metro ul li:last-child {   padding-bottom: 9px;   margin-bottom: -25px;  }  .metro a {   text-decoration: none;   display: block;   font-family: 'Noto Sans', sans-serif;   color: #4A4B4D;  }  .metro a:before {   content: "";   display: inline-block;   background: #CA682D;   width: 12px;   height: 12px;   left: -9px;   position: relative;   border-radius: 50%;   margin-right: .5em;  }

3. Вертикальное меню с эффектами при наведении

Иконка и фоновая заливка, проявляющиеся при наведении на элемент списка, помогут разнообразить дизайн элементов вертикального меню.


<div class="category-wrap">   <h3>Категории</h3>   <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>   </ul>  </div>
.category-wrap {   padding: 15px;   background: white;   width: 200px;   box-shadow: 2px 2px 8px rgba(0,0,0,.1);   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  }  .category-wrap h3 {   font-size: 16px;   color: rgba(0,0,0,.6);   margin: 0 0 10px;   padding: 0 5px;   position: relative;  }  .category-wrap h3:after {   content: "";   width: 6px;   height: 6px;   background: #80C8A0;   position: absolute;   right: 5px;   bottom: 2px;   box-shadow: -8px -8px #80C8A0, 0 -8px #80C8A0, -8px 0 #80C8A0;  }  .category-wrap ul {   list-style: none;   margin: 0;   padding: 0;    border-top: 1px solid rgba(0,0,0,.3);  }  .category-wrap li {margin: 12px 0 0 0px;}  .category-wrap a {   text-decoration: none;   display: block;    font-size: 13px;   color: rgba(0,0,0,.6);   padding: 5px;   position: relative;   transition: .3s linear;  }  .category-wrap a:after {   content:"f18e";   font-family: FontAwesome;   position: absolute;   right: 5px;   color: white;   transition: .2s linear;  }  .category-wrap a:hover {   background: #80C8A0;   color: white;  }

4. Вертикальное меню с иконками


Иконки в меню создают визуальный якорь, дополняя словесное описание каждой категории. Для отображения иконок нужно подключить шрифт Awesome. Вы также можете использовать любой другой иконочный шрифт или иконки-картинки.

<div class="widget">   <h3>Категории</h3>   <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>   </ul>  </div>
* {box-sizing: border-box; margin: 0;}  .widget {   padding: 20px;   border: 5px solid #f1f1f1;   background: #fff;   border-radius: 5px;   font-family: 'Roboto', sans-serif;  }  .widget h3 {   margin-bottom: 20px;   text-align: center;   font-size: 24px;   font-weight: normal;   color: #424949;  }  .widget ul {   margin: 0;   padding: 0;   list-style: none;   width: 250px;  }  .widget li {   border-bottom: 1px solid #eaeaea;   padding-bottom: 15px;   margin-bottom: 15px;  }  .widget li.  

} .widget li:nth-child(5):before {content:"f03d";}

5. Вертикальное меню с картинками

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

<div class="col">   <h3 class="widget-title">Распродажа</h3>   <div class="price-line">   <div class="product-image">   <a href=""><img src="https://html5book.ru/wp-content/uploads/2017/03/sport1.jpeg"></a>   </div>   <div class="product-content">   <div class="product-title"><a href="">Продукт 1</a></div>   <div class="star-rating">&nbsp;</div>   <div class="price-box"><span>₽ 2000</span></div>   </div>   </div>   <div class="price-line">   <div class="product-image">   <a href=""><img src="https://html5book.ru/wp-content/uploads/2017/03/sport2.jpeg"></.  

;div class="product-content"> <div class="product-title"><a href="">Продукт 3</a></div> <div class="star-rating">&nbsp;</div> <div class="price-box"><span>₽ 2070</span></div> </div> </div> </div>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');  .col {   width: 300px;   background: white;   padding: 20px;   border: 1px solid #eeeeee;   font-family: 'Open Sans', sans-serif;  }  .col * {margin: 0;}  .widget-title {   margin: 0 0 30px;   line-height: 1;   text-transform: uppercase;   letter-spacing: 1px;   font-size: 20px;   color: #242424;   overflow: hidden;  }  .widget-title:after {   content: "";   position: relative;   display: inline-block;   width: 100%;   vertical-align: middle;    right: -15px;   margin-right: -100%;   border-top: 2px solid #cca86d;   }  .price-line {margin-bottom: 20px;}  .price-line:last-child {mar.  

e: 18px; line-height: 1; } .star-rating { margin-bottom: 10px; font-size: 13px; position: relative; font-family: 'FontAwesome'; } .star-rating:before { content: "f005 f005 f005 f005 f005"; position: absolute; top: 0; left: 0; color: #FF9919; }

html5book.ru

Вертикальное hover hide меню для сайта на HTML и CSS Вертикальное меню hover hide для сайта на HTML и CSS

Вы можете воспользоваться готовым вертикальным меню для сайта на HTML и CSS, которое можно разместить, например, в сайдбаре. Меню раскрывается, если навести на него мышкой. Для пунктов меню используется готовый набор иконок font-awesome. Вам достаточно просто скопировать готовый код ниже и все будет работать!

HTML разметка

    

CSS оформление

  @import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";  @import "https://fonts.googleapis.com/css?family=Titillium+Web:300";  .fa-2x{font-size:2em}  .fa{position:relative;display:table-cell;width:60px;height:36px;text-align:center;vertical-align:middle;font-size:20px}  .main-menu:hover,nav.main-menu.expanded{width:250px;overflow:visible}  .main-menu{background:#212121;border-right:1px solid #e5e5e5;position:absolute;top:0;bottom:0;height:100%;left:0;width:60px;overflow:hidden;-webkit-transition:width .05s linear;transition:width .05s linear;-webkit-transform:translateZ(0) scale(1,1);z-index:1000}  .main-menu>ul{margin:7px 0}  .main-menu li{position:relative;display:block;width:250px}  .main-menu li>a{position:relative;display:table;border-collapse:collapse;border-spacing:0;color:#999;font-family:arial;font-size:14px;text-decoration:none;-webkit-transform:translateZ(0) scale(1,1);-webkit-transition:all .1s linear;transition:all .1s linear}  .main-menu .nav-icon{position:relative;display:table-cell;width:60px;height:36px;text-align:center;vertical-align:middle;font-size:18px}  .main-menu .nav-text{position:relative;display:table-cell;vertical-align:middle;width:190px;font-family:'Titillium Web',sans-serif}  .main-menu>ul.logout{position:absolute;left:0;bottom:0}  .no-touch .scrollable.hover{overflow-y:hidden}  .no-touch .scrollable.hover:hover{overflow-y:auto;overflow:visible}  a:hover,a:focus{text-decoration:none}  nav{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}  nav ul,nav li{outline:0;margin:0;padding:0}  .main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a{color:#fff;background-color:#5fa2db}  .area{float:left;background:#e2e2e2;width:100%;height:100%}  @font-face{font-family:'Titillium Web';font-style:normal;font-weight:300;src:local('Titillium WebLight'),local(TitilliumWeb-Light),url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format("woff")}  

obninsksite.ru

Вертикальное меню

Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент <li> нашего списка будет содержать по одной ссылке:

  <ul id="navbar">   <li><a href="#">Главная</a></li>   <li><a href="#">Новости</a></li>   <li><a href="#">Контакты</a></li>   <li><a href="#">О нас</a></li>  </ul>  

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

  #navbar {   margin: 0;   padding: 0;   list-style-type: none;   width: 100px;  }  

Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента <a> со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.

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

  #navbar a {   background-color: #949494;   color: #fff;   padding: 5px;   text-decoration: none;   font-weight: bold;   border-left: 5px solid #33ADFF;   display: block;  }  #navbar li {   border-left: 10px solid #666;   border-bottom: 1px solid #666;  }  

Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Название документа</title>   <style>   #navbar {   margin: 0;   padding: 0;   list-style-type: none;   width: 100px;   }   #navbar li {   border-left: 10px solid #666;   border-bottom: 1px solid #666;   }  	 #navbar a {   background-color: #949494;   color: #fff;   padding: 5px;   text-decoration: none;  		font-weight: bold;   border-left: 5px solid #33ADFF;  		display: block;   }   </style>   </head>     <body>      <ul id="navbar">   <li><a href="#">Главная</a></li>   <li><a href="#">Новости</a></li>   <li><a href="#">Контакты</a></li>   <li><a href="#">О нас</a></li>   </ul>     </body>  </html>

Попробовать »

При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.

Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:

  #navbar a:hover {   background-color: #666;   border-left: 5px solid #3333FF;  }  

Попробовать »

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

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

Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов <li> нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.

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

  <ul id="navbar">   <li><a href="#">Главная</a></li>   <li><a href="#">Новости</a></li>   <li><a href="#">Контакты</a></li>   <li><a href="#">О нас</a></li>  </ul>  

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

  #navbar {   margin: 0;   padding: 0;   list-style-type: none;  }  #navbar li { display: inline; }  

Попробовать »

Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:

  #navbar {   margin: 0;   padding: 0;   list-style-type: none;   border: 2px solid #0066FF;   border-radius: 20px 5px;   width: 550px;   text-align: center;   background-color: #33ADFF;  }  #navbar a {   color: #fff;   padding: 5px 10px;   text-decoration: none;   font-weight: bold;   display: inline-block;   width: 100px;  }  #navbar a:hover {   border-radius: 20px 5px;   background-color: #0066FF;  }  

Попробовать »

puzzleweb.ru

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

Вертикальное многоуровневое меню типа аккордеон, раскрывающееся по клику на стрелке. 

HTML

Обычный неупорядоченный список, точно такой же, как и в прошлой нашей статье.

active — класс для пункта, который будет подсвечен — его можно не указывать.

has-sub — класс добавляем к тем, пунктам, у которых есть дочерние элементы.

<div id='cssmenu'>      <ul>         <li class='active'><a href='index.html'><span>Главная</span></a></li>         <li class='has-sub'><a href='#'><span>Каталог</span></a>            <ul>               <li class='has-sub'><a href='#'><span>Смартфоны</span></a>                  <ul>                     <li><a href='#'><span>Samsung</span></a></li>                     <li><a href='#'><span>Sony</span></a></li>                  </ul>               </li>               <li class='has-sub'><a href='#'><span>Планшеты</span></a>                  <ul>                     <li><a href='#'><span>Asus</span></a></li>                     <li><a href='#'><span>Lenovo</span></a></li>                  </ul>               </li>            </ul>         </li>         <li><a href='#'><span>О магазине</span></a></li>         <li><a href='#'><span>Контакты</span></a></li>      </ul>  </div>

CSS

#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a {      border: 0 none;      -webkit-box-sizing: border-box;      -moz-box-sizing: border-box;      box-sizing: border-box;      display: block;      line-height: 1;      list-style: none outside none;      margin: 0;      padding: 0;      position: relative;  }  #cssmenu {      color: #ffffff;      font-family: Helvetica,Arial,sans-serif;      width: 200px;  }  #cssmenu ul ul {      display: none;  }  #cssmenu > ul > li > a {      background: rgb(54,170,231); /* Old browsers */      background: -moz-linear-gradient(top,  rgba(54,170,231,1) 0%, rgba(31,160,228,1) 100%); /* FF3.6+ */      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(54,170,231,1)), color-stop(100%,rgba(31,160,228,1))); /* Chrome,Safari4+ */      background: -webkit-linear-gradient(top,  rgba(54,170,231,1) 0%,rgba(31,160,228,1) 100%); /* Chrome10+,Safari5.1+ */      background: -o-linear-gradient(top,  rgba(54,170,231,1) 0%,rgba(31,160,228,1) 100%); /* Opera 11.10+ */      background: -ms-linear-gradient(top,  rgba(54,170,231,1) 0%,rgba(31,160,228,1) 100%); /* IE10+ */      background: linear-gradient(to bottom,  rgba(54,170,231,1) 0%,rgba(31,160,228,1) 100%); /* W3C */      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36aae7', endColorstr='#1fa0e4',GradientType=0 ); /* IE6-9 */      border-left: 1px solid #1682ba;      border-right: 1px solid #1682ba;      border-top: 1px solid #1682ba;      -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;      color: #ffffff;      cursor: pointer;      font-size: 14px;      font-weight: bold;      padding: 15px 20px;      text-decoration: none;      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);      z-index: 2;  }  #cssmenu > ul > li > a:hover,  #cssmenu > ul > li.active > a,  #cssmenu > ul > li.open > a {      background: rgb(31,160,228); /* Old browsers */      background: -moz-linear-gradient(top,  rgba(31,160,228,1) 0%, rgba(25,146,209,1) 100%); /* FF3.6+ */      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(31,160,228,1)), color-stop(100%,rgba(25,146,209,1))); /* Chrome,Safari4+ */      background: -webkit-linear-gradient(top,  rgba(31,160,228,1) 0%,rgba(25,146,209,1) 100%); /* Chrome10+,Safari5.1+ */      background: -o-linear-gradient(top,  rgba(31,160,228,1) 0%,rgba(25,146,209,1) 100%); /* Opera 11.10+ */      background: -ms-linear-gradient(top,  rgba(31,160,228,1) 0%,rgba(25,146,209,1) 100%); /* IE10+ */      background: linear-gradient(to bottom,  rgba(31,160,228,1) 0%,rgba(25,146,209,1) 100%); /* W3C */      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1fa0e4', endColorstr='#1992d1',GradientType=0 ); /* IE6-9 */      color: #eeeeee;  }  #cssmenu > ul > li.open > a {      border-bottom: 1px solid #1682ba;      -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.15);      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.15);  }  #cssmenu > ul > li:last-child > a,  #cssmenu > ul > li.last > a {      border-bottom: 1px solid #1682ba;  }  .holder {      height: 0;      position: absolute;      right: 0;      top: 0;      width: 0;  }  .holder:after, .holder:before {      content: "";      display: block;      height: 6px;      position: absolute;      right: 20px;      -webkit-transform: rotate(-135deg);      -moz-transform: rotate(-135deg);      transform: rotate(-135deg);      width: 6px;      z-index: 10;  }  .holder:after {      border-left: 2px solid #ffffff;      border-top: 2px solid #ffffff;      top: 17px;  }  #cssmenu > ul > li > a:hover > span:after,  #cssmenu > ul > li.active > a > span:after,  #cssmenu > ul > li.open > a > span:after {      border-color: #eeeeee;  }  .holder:before {      border-left-color: inherit;      border-left-style: solid;      border-left-width: 2px;      border-top-color: inherit;      border-top-style: solid;      border-top-width: 2px;      top: 18px;  }  #cssmenu ul ul li a {      background:#49505a;      border-bottom: 1px solid #32373e;      border-left: 1px solid #32373e;      border-right: 1px solid #32373e;      -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;      color: #eeeeee;      cursor: pointer;      font-size: 13px;      padding: 10px 20px;      text-decoration: none;      z-index: 1;  }  #cssmenu ul ul li:hover > a,  #cssmenu ul ul li.open > a,  #cssmenu ul ul li.active > a {      background: none repeat scroll 0 0 #424852;      color: #ffffff;  }  #cssmenu ul ul li:first-child > a {      -webkit-box-shadow: none;      box-shadow: none;  }  #cssmenu ul ul ul li:first-child > a {      -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;  }  #cssmenu ul ul ul li a {      padding-left: 30px;  }  #cssmenu > ul > li > ul > li:last-child > a,  #cssmenu > ul > li > ul > li.last > a {      border-bottom: 0 none;  }  #cssmenu > ul > li > ul > li.open:last-child > a,  #cssmenu > ul > li > ul > li.last.open > a {      border-bottom: 1px solid #32373e;  }  #cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {      border-bottom: 0 none;  }  #cssmenu ul ul li.has-sub > a:after {      border-left: 2px solid #eeeeee;      border-top: 2px solid #eeeeee;      content: "";      display: block;      height: 5px;      position: absolute;      right: 20px;      top: 11.5px;      -webkit-transform: rotate(-135deg);      -moz-transform: rotate(-135deg);      transform: rotate(-135deg);      width: 5px;      z-index: 10;  }  #cssmenu ul ul li.active > a:after,  #cssmenu ul ul li.open > a:after,  #cssmenu ul ul li > a:hover:after {      border-color: #ffffff;  }  

JS

Подключаем jQuery библиотеку и подключаем следующий скрипт:

$(document).ready(function () {      $('#cssmenu li.has-sub > a').on('click', function(){          $(this).removeAttr('href');          var element = $(this).parent('li');          if (element.hasClass('open')) {              element.removeClass('open');              element.find('li').removeClass('open');              element.find('ul').slideUp();          }          else {              element.addClass('open');              element.children('ul').slideDown();              element.siblings('li').children('ul').slideUp();              element.siblings('li').removeClass('open');              element.siblings('li').find('li').removeClass('open');              element.siblings('li').find('ul').slideUp();          }      });         $('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');  });

pcvector.net

  1. Меню для сайта вертикальноеСергей

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

    То, что сейчас оно непопулярно — ну бог знает… Это либо ошибка моды, либо непопулярность именно на тех сайтах, где количество просмотров не имеет особого смысла — к примеру, на одностраничниках или информационных сайтах-блогах, где люди в основном читают либо одну новость, придя по ссылке, либо всё подряд, если являются постоянными читателями.

    Боковое меню, да еще с иконками — очень хороший инструмент.

    Ответить

  2. Меню для сайта вертикальноеСергей

    =) Я поясню свою мысль. Из практики я заметил, что боковое отлично увеличивает глубину просмотров там, где рубрикация жизненно необходимо. Что это за сайты? Это прежде всего каталоги — игр, фильмов, объявлений. На блогах и информационных сайтах существенно значимого увеличения глубины просмотров я не заметил, но на каталогах — вах! в два раза по сравнению с любыми другими вариантами (выпадающее меню из 1 кнопки, верхнее меню, другие способы рубрикации).

    Минималистичная кнопка с выпадающим меню, которой сейчас все увлечены — это ошибка моды, особенно на Ютубе. Хотя возможно, именно там это уже не играет особой роли из-за мощной интеллектуальной системы подсказок и рекомендаций. То есть Гуголь вполне может отказаться, у него есть другая система, увеличивающая число времени пользователя на сайте и еще система подписки. А вот у обычного сайта-каталога — отказ от бокового меню ошибка.

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

    Еще, из личных наблюдений:

    — боковое меню слева лучше, чем боковое меню справа (идиотский стандарт многих шаблонов)

    — иконки-значки в меню значительно увеличивают число просмотров на детских игровых сайтах

    — большое количество рубрик в меню — это хорошо. Вообще большое число рубрик — это хорошо.

    Ответить

  3. Меню для сайта вертикальноеAltetsa

    Можно добавить также сайт Пол Ван Дайка www.carlcox.com и Карла Кокса www.carlcox.com

    Ответить

  4. Меню для сайта вертикальноеAltetsa

    www.paulvandyk.com

    Ответить

www.dejurka.ru

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

Хабр, привет!

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

Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.

В этом обзоре мы рассмотрим многоуровневые меню.

Flat Horizontal Navigation

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

Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
http://codepen.io/andytran/pen/kmAEy

Material Nav Header w/ Aligned Dropdowns

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

Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
 
Smooth Accordion Dropdown Menu

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

Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
http://codepen.io/fainder/pen/AydHJ
 
Pure CSS Dark Inline Navigation Menu

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

Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
 
Pure CSS3 Mega Dropdown Menu With Animation

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

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

Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs
 
CSS3 Dropdown Menu

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

Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
http://codepen.io/ojbravo/pen/tIacg
 
Simple Pure CSS Dropdown Menu

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

Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
http://codepen.io/Responsive/pen/raNrEW
 
Bootstrap 3 mega-dropdown menu

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

Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
 
Flat Navigation

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

Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
http://codepen.io/andytran/pen/YPvQQN
 
3D nested navigation

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

Горизонтальное меню с очень крутой анимацией без js!
http://codepen.io/devilishalchemist/pen/wBGVor
 
Responsive Mega Menu — Navigation

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

Горизонтальное адаптивное меню.  Выглядит неплохо, но мобильная версия немного "хромает". Используется css, html и js.
http://codepen.io/samiralley/pen/xvFdc
 
Pure Css3 Menu

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

Оригинальное меню. С простым и чистым кодом без js. Применяйте для "вау" эффектов.
http://codepen.io/Sonick/pen/xJagi
 
Full CSS3 Dropdown Menu

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

Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi
 
Css3 only dropdown menu

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

Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
http://codepen.io/riogrande/pen/ahBrb
 
Dropdown Menus

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

Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
http://codepen.io/kkrueger/pen/qfoLa
 
Pure CSS DropDown Menu

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

Примитивное, но эффективное решение. Только css и html.
http://codepen.io/andornagy/pen/xhiJH
 
Pull Menu — Menu Interaction Concept

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

Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
http://codepen.io/fbrz/pen/bNdMwZ
 
Make Simple Dropdown Menu

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

Чистый и простой код, без js. В ie8 точно работать будет.
http://codepen.io/nyekrip/pen/pJoYgb
 
Pure CSS dropdown [work for mobile touch screen]

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

Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
http://codepen.io/jonathlee/pen/mJMzgR
 
Dropdown Menu

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

Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
http://codepen.io/MeredithU/pen/GAinq
 
CSS 3 Dropdown Menu

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

Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
http://codepen.io/ibeeback/pen/qdEZjR
 
KVdKQJ (автор очень долго думал над названием)

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

Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ
 
CSS3 Menu Dropdowns (особенное решение)!

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

Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
http://codepen.io/cmcg/pen/ofFiz
 
П.С.
Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.

habr.com

Разметка меню

Я предлагаю записать в html такой код:

<ul class = "menu"> 	<li><a href = "#">Создание сайта</a></li> 	<li><a href = "#">Улучшение сайта</a></li> 	<li><a href = "#">HTML и CSS</a></li> 	<li><a href = "#">WordPress</a></li> </ul>

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

Также добавили класс .menu. По нему мы сможем обращаться к элементу в css. Кстати, давайте посмотрим на то, что мы создали.вертикально меню на css - начало Наше меню уже, по сути, вертикальное Конечно, в этой статье я предложу вам несколько вариантов его оформления, чтобы оно не выглядело так скучно, но первым делом нужно убрать маркеры. Это делается так:

.menu{ 	List-style: none; }

Простое оформление

Теперь возьмемся как следует за то, чтобы стилизовать нашу навигацию. Во-первых, пунктам меню нужно определить какую-то ширину, что они не занимали все место на странице, ведь на реальном сайте у нас справа будет какая-то информация. Запишем для них:

.menu li{ 	width: 200px; }

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

.menu li a{ 	display: block; 	background: #3D60B8; 	color: yellow; 	padding: 15px; 	text-decoration: none; }

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

Все это очень простые манипуляции. Нашему меню не хватает разделителя, поэтому добавим еще такое правило:

.menu li{ border-bottom: 1px solid yellow; }

оформление меню
Отлично, у каждого пункта меню добавиться снизу тонкая желтая линия, которая будет явно отделять его от других. Только вот есть одна проблема – обычно у последнего пункта такую рамку добавлять не нужно. Что ж, это очень легко реализовать следующим образом:

.menu li:last-child{ 	border-bottom: none; }

И теперь последний пункт, каким бы по счету он ни был, не получит рамку.

Наше меню работает

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

А что еще можно сделать? Другие варианты оформления

Скругление углов. О скруглении я отдельно написал статью, можете почитать, чтобы лучше разобраться. Тут же я скажу об этом коротко – оно задается с помощью свойства border-radius.

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

.menu li a{ border-radius: 20px; }

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

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

.menu li a{ 	display: block; 	background: linear-gradient(to bottom, rgba(254,255,255,1) 0%,rgba(221,241,249,1) 35%,rgba(160,216,239,1) 100%); 	color: purple; 	padding: 15px; 	text-decoration: none; 	border-radius: 20px; }

В стилях я также поменял цвет текста, а то желтый был нечитаемым на таком фоне, а также убрал нижнее подчеркивание, при скругленных уголках оно не сильно то и нужно. И вот что у нас получилось:
градиентное меню
Ах да, еще я выровнял текст в пунктах по центру с помощью свойства text-align:center. Допишите его в стили, если хотите также.

Идем дальше. Можно придать дополнительное оформление пунктам, если добавить к ним тень. Это можно сделать так:

box-shadow: 2px 2px 2px 0 purple;

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

И вот что получилось:
с тенью

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

Добавим стили при наведении на пункты

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

За стили при наведении отвечает псевдокласс hover. Кстати, о нем у меня тоже имеется статейка. Мы сделаем по продвинутому, пусть при наведении цвет будет меняться на другой градиент:

.menu li a:hover{ 	background: linear-gradient(to bottom, rgba(136,191,232,1) 0%,rgba(112,176,224,1) 100%); }

при наведении
Соответственно, есть еще миллион возможностей изменить внешний вид нашего меню: задать другой цвет тексту, другую тень, размер шрифта, другой цвет и многое-многое другое.

Например, добавьте к menu li a:

Transition: 1s;

А к .menu li a:hover:

Letter-spacing: 2px;

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

dolinacoda.ru


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.