Моя персональная страница

Adaptive drop menu for WordPress

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



Example - http://jsfiddle.net/h46pm/

CSS

.menu_wrap {
z-index: 1;
position: absolute;
bottom: 1px;
right: 10px;
float:right;
}
.menu_wrap .min_nav {
display: none;
}
.menu_wrap a {
padding: 0px 0px 15px 0px ;
position: relative;
color: #fff;
text-decoration: underline;
}
.menu_wrap li {
position: relative;
text-align: center;
float: right;
padding: 5px 10px 5px 10px;
margin: 0px 1px 1px 1px;
background-color: #333;
border-color: #000;
border-width: 1px;
border-style: solid;
border-radius: 5px;

list-style-type: none;
}
.menu_wrap li:hover {
background-color: #fea;
border-color: #640;
}
.menu_wrap .sub-menu {
z-index: 2;
display: none;
position: absolute;
}
.menu_wrap .menu > li > .sub-menu {
top: 100%;
right: -2px;
margin: 2px 0px 0px 0px ;}
.menu_wrap .sub-menu > li > .sub-menu {
top: 0%;
right: 100%;
margin: -1px 1px 0px 0px;
}
.menu_wrap .sub-menu li {
float: none;
}
.menu_wrap li:hover > .sub-menu { display: block;
}
.menu_wrap li:hover > a {
text-decoration: none;
color: #000;
}
.menu_wrap .sub-menu > li:first-child:after {
content: ''; position: absolute; width: 0; height: 0;
}
.menu_wrap .menu > li > .sub-menu > li:first-child:after{
right: 10px;
top: -9px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #333;
}
.menu_wrap .sub-menu > li > .sub-menu > li:first-child:after { top: 10px;    right: -9px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #333;
}
@media screen and (max-width:480px) { .menu_wrap {
top: 125px;
}
.menu_wrap .min_nav {
display: block; }
.menu_wrap li {
padding: 2px 10px 2px 10px;
display: none;
}
.menu_wrap:hover li {
display: block;
float: none; } .menu_wrap .menu > li > .sub-menu {
top: 0%;
right: 100%;
margin: -1px 1px 0px 0px ; }
.menu_wrap .menu > li > .sub-menu > li:first-child:after {
top: 10px;
right: -14px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 8px solid #333;
}
}

HTML + PHP template

<div class="menu_wrap">

 <ul>

<li class="min_nav">

  <a href="#" class="active">

Menu

</a>

  </li>

</ul>

<?php

wp_nav_menu (

array (

     'theme_location'  => 'side_menu' , 

 'container'       => '' , 

 'echo'            => true , 

 'fallback_cb'     => 'wp_page_menu' , 

 'items_wrap'      => '<ul id=%1$s class=%2$s>%3$s</ul>' , 

 'depth'           => 0 

  )

);

?>

</div>

functions.php

if ( function_exists ( 'register_nav_menus' ) ) {

 register_nav_menus (

  array (  

'menu1' => 'this is menu 1' ,

'menu2' => 'this is menu 2' ,  

'menu3' => 'this is menu 3' 

)

);

}

 

Enjoy



Обновлен 27 июл 2013. Создан 13 июн 2013



  Комментарии       
Всего 1, последний 4 года назад
forexbonus 04 ноя 2014 ответить
Желаем успехов!
Имя или Email


При указании email на него будут отправляться ответы
Как имя будет использована первая часть email до @
Сам email нигде не отображается!
Зарегистрируйтесь, чтобы писать под своим ником