» »

Раздвижное меню на CSS для сайта


Раздвижное меню на CSS для сайта

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

Установка:

Основной код каркаса:

Код
<div class="menu">
<a href="#">Раздел</a>  
  <a href="#">Раздел</a>  
  <div class="link_drop">  
  <a href="#" class="link_drop_top">Выпадающий раздел</a>  
  <a href="#">Подраздел</a>  
  <a href="#">Подраздел</a>  
  <a href="#">Подраздел</a>  
  <a href="#">Подраздел</a>  
  <a href="#">Подраздел</a>  
  </div>  
  <a href="#">Раздел</a>  
  <a href="#">Раздел</a>  
  </div>


CSS:

Код
.menu {width: 100%; overflow: hidden; border-radius: 5px; font-size: 13px; font-family: 'Open Sans', Tahoma, sans-serif;}  
  .menu a {width: calc(100% - 10%); height: 30px; line-height: 30px; padding: 0 5%; display: block; background: rgb(229,101,76); border-bottom: 1px solid rgba(34,34,34,.25); color: #fff; text-decoration: none !important;}  
  .link_drop a {background: rgb(71, 65, 65); padding-left: calc(5% + 5px); width: calc(100% - 10% - 5px);}  
  .link_drop a:hover {box-shadow: 4px 0 0 0 rgb(229,101,76) inset;}  
  .link_drop {height: 31px; overflow: hidden;}  
  .link_drop:hover {height: calc(31px + 31px * 5);}  
  .link_drop_top {background: rgb(229,101,76) !important; width: calc(100% - 10%) !important; padding: 0 5% !important;}  
  .link_drop:before {width: 30px; height: 30px; content: ''; background: url('http://zornet.ru/Ajaxoskrip/SN/Drean/47372693.png') no-repeat center / 100%; transform: translate(-5px,0) rotate(-90deg); display: inline-block; float: right;}  
  .link_drop:hover:before {transform: translate(-5px,0) ;}  
  .link_drop, .menu a, .link_drop:before {transition: all linear .3s; -moz-transition: all linear .3s; -webkit-transition: all linear .3s; -o-transition: all linear .3s;}
13.04.2016 Просмотров: 1141 Комментарий: (26)

Поделиться в социальных сетях

Материал разместил

Комментарий: 26
Maryges
Maryges 13.04.2016 22:171
0
На эту навигацию сделано DEMO, что можно посмотреть.
Alex_L_X
Alex_L_X 13.04.2016 23:102
0
У меня с вебочки чет редко когда что пашет, в том числе и это меню не пашет. В стилях есть .menu а вызова в диве его нет. А в демке она в оболочке .menu.
Вот и делайте выводы
Alex_L_X
Alex_L_X 13.04.2016 23:133
0
А ну так вот и вся причина)
Alex_L_X
Alex_L_X 13.04.2016 23:154
0
Костен сверху допиши

Код
<div class="menu">
Kosten
Kosten 13.04.2016 23:215
0
Alex_L_X, спасибо, дописал, а там реально этого дева не хватала и навигация не работала. А так что с вебочки беру, просто там демо было, и как понимаете, значит код рабочий, так что нужно смотреть.
Kosten
Kosten 13.04.2016 23:396
0
От Alex_L_X, пример этого меню в синем цвете, это кому нужно если этот оттенок, меняем стили.



Код
.menu {width: 100%; overflow: hidden; border-radius: 5px; font-size: 13px; font-family: 'Open Sans', Tahoma, sans-serif;}   
   .menu a {width: calc(100% - 10%); height: 30px; line-height: 30px; padding: 0 5%; display: block; background: rgb(70,130,180)/*фон меню*/; border-bottom: 1px solid rgba(65,105,225,.25)/*цвет разделителя*/; color: #fff; text-decoration: none !important;}   
   .link_drop a {background: rgb(90, 140, 180)/*фон меню выпадающее*/; padding-left: calc(5% + 5px); width: calc(100% - 10% - 5px);}   
   .link_drop a:hover {box-shadow: 4px 0 0 0 rgb(200,200,200) /*цвет индикатора курсора в выпадающем*/ inset;}   
   .link_drop {height: 31px; overflow: hidden;}   
   .link_drop:hover {height: calc(31px + 31px * 5);}   
   .link_drop_top {background: rgb(90,140,180)/*фон раздела с выпадением*/ !important; width: calc(100% - 10%) !important; padding: 0 5% !important;}   
   .link_drop:before {width: 30px; height: 30px; content: ''; background: url('http://zornet.ru/Ajaxoskrip/SN/Drean/47372693.png') no-repeat center / 100%; transform: translate(-5px,0) rotate(-90deg); display: inline-block; float: right;}   
   .link_drop:hover:before {transform: translate(-5px,0) ;}   
   .link_drop, .menu a, .link_drop:before {transition: all linear .3s; -moz-transition: all linear .3s; -webkit-transition: all linear .3s; -o-transition: all linear .3s;}
Maryges
Maryges 13.04.2016 23:467
0
Но это в блоке, а если поставить в не его, думаю совершенно по другому будет, если только есть размер в стилях на ширину.
Alex_L_X
Alex_L_X 13.04.2016 23:488
0
Цитата Maryges
Но это в блоке, а если поставить в не его, думаю совершенно по другому будет, если только есть размер в стилях на ширину.

Есть он адаптивный стоит, т.е. 100%, можно на своё значение поменять например 300px. Но мне кажется он в блок, ему там самое место
Maryges
Maryges 14.04.2016 00:029
0
Alex_L_X, не спорю, нормально там смотрится, но у каждого свои ведение на дизайн, и думаю не плохо знать, что и так можно поставить.
Kosten
Kosten 15.04.2016 18:1810
0
Но как видно в блок сайта нормально смотрится, но есть меню одно, которое без блога отлично подходит.
oooppp1995
oooppp1995 03.11.2016 18:0911
0
Кто-нибудь может подсказать, почему фон белый а не синий как в DEMO?
Kosten
Kosten 03.11.2016 18:4812
0
Так вы какой стиль ставили, просто синий предоставлен в комментариях, как альтернатива. В материале копируйте и устанавливайте.
Kosten
Kosten 03.11.2016 18:5013
0
Что про фон, так там страница для демонстрации, и стиль прописан специально, для красоты. Которого нет в навигаций, это демо страница.
avatar
Dimoks 30.12.2016 10:5914
0
Подскажите как сделать так что бы отображало более 5 ссылок, в выпадающем меню. Добавляю разделы, а он их просто не показывает. Как исправить?
Brung
Brung 30.12.2016 11:3215
0
Так нужно не разделы добавлять, а под меню.
avatar
Dimoks 30.12.2016 11:3616
0
Так и добавляю под меню, а он выводит только первые 5 "Подразделов", остальные которые я добавил, неотображаются
Kosten
Kosten 30.12.2016 11:4617
0
Реально, сам сейчас поставил, и не отражаются под разделы, возможно в стилях нужно сделать, разбираюсь.
Kosten
Kosten 30.12.2016 11:5718
0
Вместо 31 делайте больше и ставьте под меню и там сами выставляйте как вам нужно.

Код
.link_drop:hover {height: calc(31px + 31px * 5);}
Kosten
Kosten 30.12.2016 12:0319
0
Первая цифра идет 31, просто увеличивайте, отвечает за пространства под меню.

Kosten
Kosten 30.12.2016 12:0720
0
К примеру если вместо 31 выставить 46 на обоих, то можно добавить еще 3 под меню.

Код
.link_drop:hover {height: calc(46px + 46px * 5);}
avatar
Dimoks 30.12.2016 12:5521
0
Проблема еще в том что у меня вот такое меню:
Код
<div class="menu">    
<a href="/">Главная страница</a>    
<div class="link_drop">    
<a href="#" class="link_drop_top">ETS 2</a>    
<a href="#">Грузовики / Тягачи</a>    
<a href="#">Карты</a>    
<a href="#">Легковой транспорт</a>    
<a href="#">Погодные условия</a>    
<a href="#">Прицепы</a>
<a href="#">Трафик</a>
<a href="#">Тюнинг</a>
<a href="#">Сохранения</a>
<a href="#">Патчи</a>
<a href="#">Читы/трейнеры</a>
<a href="#">Другие моды</a>    
</div>
<div class="link_drop">    
<a href="/load/ats/14" class="link_drop_top">ATS</a>    
<a href="#">Карты</a>    
<a href="#">Грузовики / Тягачи</a>    
<a href="#">Прицепы</a>    
<a href="#">Тюнинг / Салон</a>    
<a href="#">Трафик</a>
<a href="#">Другие моды</a>    
</div>    
<div class="link_drop">    
<a href="#" class="link_drop_top">STDS</a>    
<a href="#">Карты</a>    
<a href="#">Грузовики</a>    
<a href="#">Другие моды</a>    
</div>    
</div>

И как не подгоняй два этих параметра будет большой отступ между категориями
Картинка: http://radikal.ru/lfp....htm
Kosten
Kosten 30.12.2016 13:2622
0
Что то не получается, разве что добавить пару под меню, чтоб у всех было ровно, только так получиться.

В каждом разделе одинаковое количество под меню.
Kosten
Kosten 30.12.2016 13:3624
0
Просто как видно, в одном если раздели делать к примеру 7 под меню, а во втором 5 к примеру, то получается пробел светлый, если делать, то везде ровно.

Тут просто раздел раздвижной запланировано чтоб один был на этой навигаций.
Kosten
Kosten 30.12.2016 13:3323
+1
Вообщем так к примеру, чтоб по 5 под меню было в каждом разделе.



Код

Код
<div class="menu">  
<a href="/">Главная страница</a>  
<div class="link_drop">  
<a href="#" class="link_drop_top">ETS 2</a>  
<a href="#">Грузовики / Тягачи</a>  
<a href="#">Карты</a>  
<a href="#">Легковой транспорт</a>  
<a href="#">Погодные условия</a>  
<a href="#">Прицепы</a>  
<a href="#">Трафик</a>  
<a href="#">Тюнинг</a>  
<a href="#">Сохранения</a>  
<a href="#">Патчи</a>  
<a href="#">Читы/трейнеры</a>  
<a href="#">Другие моды</a>  
</div>  
<div class="link_drop">  
<a href="/load/ats/14" class="link_drop_top">ATS</a>  
<a href="#">Карты</a>  
<a href="#">Грузовики / Тягачи</a>  
<a href="#">Прицепы</a>  
<a href="#">Тюнинг / Салон</a>  
<a href="#">Трафик</a>  
<a href="#">Другие моды</a>  
</div>  
<div class="link_drop">  
<a href="#" class="link_drop_top">STDS</a>  
<a href="#">Карты</a>  
<a href="#">Грузовики</a>  
<a href="#">Другие моды</a>  
<a href="#">под меню</a>  
<a href="#">под меню</a>
</div>  
  <a href="#"></a>  
</div>


CSS

Код
.menu {width: 100%; overflow: hidden; border-radius: 5px; font-size: 13px; font-family: 'Open Sans', Tahoma, sans-serif;}  
  .menu a {width: calc(100% - 10%); height: 30px; line-height: 30px; padding: 0 5%; display: block; background: rgb(229,101,76); border-bottom: 1px solid rgba(34,34,34,.25); color: #fff; text-decoration: none !important;}  
  .link_drop a {background: rgb(71, 65, 65); padding-left: calc(5% + 5px); width: calc(100% - 10% - 5px);}  
  .link_drop a:hover {box-shadow: 4px 0 0 0 rgb(229,101,76) inset;}  
  .link_drop {height: 31px; overflow: hidden;}  
  .link_drop:hover {height: calc(31px + 31px * 5);}  
  .link_drop_top {background: rgb(229,101,76) !important; width: calc(100% - 10%) !important; padding: 0 5% !important;}  
  .link_drop:before {width: 30px; height: 30px; content: ''; background: url('http://zornet.ru/Ajaxoskrip/SN/Drean/47372693.png') no-repeat center / 100%; transform: translate(-5px,0) rotate(-90deg); display: inline-block; float: right;}  
  .link_drop:hover:before {transform: translate(-5px,0) ;}  
  .link_drop, .menu a, .link_drop:before {transition: all linear .3s; -moz-transition: all linear .3s; -webkit-transition: all linear .3s; -o-transition: all linear .3s;}
avatar
parfumisrael1985 27.01.2017 13:3925
0
Спасибо за скрипт , а как в него добавить цвет надписей изменив с белого на другой спасибо
1 2 »
avatar