• May 29, 2017
    <nav>
        <ul>
          <li>&#9776;
            <ul>
              <li id="header">Menu</li>
              <li><a href="/>ampready</a></li>
              <li><a href="/getting-started/>getting started</a></li>
            </ul>
          </li>
        </ul>
        <div id="closemenu">&#215;</div>
      </nav> - See more at: http://cymiz.com/forum/index.php/topic,3130.0.html#sthash.xVscH8SN.dpuf
    /* 40px padding top for the top menu*/
    body{padding:40px 32px 4px 32px;}
    
    /* fixed top menu has a 40px height*/
    nav{height:40px;border-bottom:1px solid #ddd;position:fixed;top:0;left:0;right:0;background:#fff;z-index:990;}
    
    /* remove bullets and add transition effect */
    nav ul{list-style-type: none;margin:0;padding:0;transition: transform .75s ease-in-out;  -webkit-transition: transform .75s ease-in-out;}
    
    /* fixed menu button */
    nav > ul >li{position: fixed;left:36px;top:0px;z-index:991;line-height:40px;}
    
    /* initial state: hide the menu */
    nav > ul > li > ul{position:fixed;top:0;left:-240px;width:240px;bottom:0;background:#fefefe;z-index:990;padding-top:36px;border-right:1px solid #ddd;  }
    
    /* Hover state, the menu button has been clicked*/
    
    /* scroll the menu into the page */
    nav > ul > li:hover > ul{transform: translate3d( 240px, 0, 0 );-webkit-transform: translate3d( 240px, 0, 0 );}
    
    /* div on top of menu to simulate the close button, delay animation for .75s*/
    #closemenu{position:fixed;top:-40px;left:0;right:0;height:40px; z-index:999; line-height:40px; padding-left:210px;font-size:36px;
            transition: transform .05s ease-in-out;-webkit-transition: transform .05s ease-in-out; -webkit-transition-delay: 0.70s;transition-delay: 0.70s;
          }
    /* the the close menu button, uses ~ selector */
    nav ul:hover  ~ #closemenu{transform: translate3d( 0, 40px, 0 );-webkit-transform: translate3d( 0, 40px, 0 )}
    
    /* styling */
    nav a{color: #4A8DDD;}
    nav > ul > li > ul > li{font-size:20px;padding:8px 0 8px 8px;border-bottom:1px solid #ddd;}
    nav > ul > li > ul > li >a{display:block; text-decoration:none;padding:8px 0;}


เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!






เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories