منوی بسیار زیبا با قابلیت باز و بسته شدن

نوشته‌شده در در آموزش های عمومی
Loading Likes...

HTML

<nav class="vertical">
  <input type="checkbox" id="toggle2" />
  <label for="toggle2">
    <span class="icon-reorder"></span>
  </label>
  <menu>
    <li><a class="icon-home" href="#"></a></li>
    <li><a class="icon-user" href="#"></a></li>
    <li><a class="icon-picture" href="#"></a></li>
    <li><a class="icon-facetime-video" href="#"></a></li>
  </menu>
</nav>
<nav class="horizontal">
  <input type="checkbox" id="toggle" />
  <label for="toggle">
    <span class="icon-reorder"></span>
  </label>
  <menu class="cover">
    <li><a class="icon-home" href="#"></a></li>
    <li><a class="icon-user" href="#"></a></li>
    <li><a class="icon-picture" href="#"></a></li>
    <li><a class="icon-facetime-video" href="#"></a></li>
  </menu>
</nav>

CSS

 

/* Both
**********************************************/

@import url( http://fonts.googleapis.com/css?family=Quantico );
body {
  background-color: #333;
}

nav {
  overflow : hidden;
}

nav input[type=checkbox] {
  display : none;
}

menu {
  position : relative;
  transition  : all .4s cubic-bezier(0.86, 0, 0.07, 1);
}

label {
  position: relative;
  z-index : 2;
}

li {
  list-style-type: none;
}

a , label {
  display : block !important;
  width   : auto  !important;
  text-decoration : none;
  font-size       : 35px;
  background      : linear-gradient(#292929, #242424);
  color   : #FFF;
  padding : 20px 23px;
  border  : 1px solid black;
}

a:after {
  content : '';
  position: absolute;
  display : none;
  font-size   : 18px;
  font-family: 'Quantico' , georgia;
  line-height : 20px;
  text-align : center;
  color  : #fff;
  text-shadow : none;
  padding : 30px 20px;
  text-transform : capitalize;
}

li:hover a:after {
  display : block;
}

li:first-child:hover a:after {
  content : 'home';
}

li:nth-child(2):hover a:after {
  content : 'about';
}

li:nth-child(3):hover a:after {
  content : 'gallery';
}

li:nth-child(4):hover a:after {
  content : 'video';
}

span {
  display     : inline-block;
  transition : all .4s cubic-bezier(0.86, 0, 0.07, 1);
}

menu a:hover {
  box-shadow  : inset 0 0 0 4px #B93632;
  text-shadow : 0 0 2px #B93632;
  background  : #1B1B1B;
}

/* Horizontal 
**********************************************/

.horizontal label {
    float : left;
}

.horizontal menu {
    float : left;
    left  : 0;
}

.horizontal li {
  float : left;  
}

.horizontal label , .horizontal a {
  border-right-color : rgba(255,255,255,0.1);  
}

.horizontal li:last-child a {
  border-right : 1px solid black ;
}

.horizontal a:after {
  top     : 0;
  left    : 100%;
}

#toggle:checked ~ menu {
  left       : -312px;
  transition : left .4s cubic-bezier(0.86, 0, 0.07, 1);
}

#toggle:checked ~ label span {
  transform : rotate(-90deg);
  transition : all .4s cubic-bezier(0.86, 0, 0.07, 1);
}

/* Vertical
**********************************************/

nav.vertical {
  height: 500px;
  width : 80px;
  float : right;
}

.vertical menu {
  top   : -332px;
  transition : all .4s cubic-bezier(0.86, 0, 0.07, 1);
}

.vertical a , .vertical label {
  border-top-color : rgba(255,255,255,0.1);
}

.vertical a:after {
  padding : 20px 0;
  width   : 100%;
  left : 0;
  top  : 100%;
}

.vertical span {
  transform  : rotate(90deg);
}

#toggle2:checked ~ menu {
  top   : 0;
  transition   : top .4s cubic-bezier(0.86, 0, 0.07, 1);
}

#toggle2:checked ~ label span {
  transform  : rotate(0deg);
  transition : all .4s cubic-bezier(0.86, 0, 0.07, 1);
}

 

Java script

ندارد

دموی آنلاین

تا بارگذاری کامل کمی صبر کنید

See the Pen Khafan Menu by Mojtaba Seyedi (@new) on CodePen



سوالی دارید؟

بدون گرفتن نتیجه اینجا رو ترک نکنید! هر سوالی دارید میتونید در عرض ۱۵ ثانیه ثبت نام و خیلی زود جواب بگیرید.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

45 ÷ = 5