Responsive Website Design: Drop-Down Navigation: Touch-Friendly and Responsive

create index.html

<!DOCTYPE html>

<head>
 <meta charset="utf-8" />
 <title>Drop-Down Navigation: Touch-Friendly and Responsive</title>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="description" content="Drop-Down Navigation: Touch-Friendly and Responsive" />
 <meta name="robots" content="all">
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 
 
 
 <style>

body
  {
   background-color: #000000;
   padding: 1.25em;
  }

a{
   text-decoration:none;
   }
  #nav
  {
   width: 60em; 
   font-family: 'Open Sans', sans-serif;
   font-weight: 400;
   position: absolute;
   top: 25%;
   left: 50%;
   margin-left: -30em; 
  }

#nav > a
   {
    display: none;
   }

#nav li
   {
    position: relative;
   }
    #nav li a
    {
     color: #fff;
     display: block;
    }
    #nav li a:active
    {
     background-color: #c00 !important;
    }

#nav span:after
   {
    width: 0;
    height: 0;
    border: 0.313em solid transparent; 
    border-bottom: none;
    border-top-color: #FFFFFF;
    content: '';
    vertical-align: middle;
    display: inline-block;
    position: relative;
    right: -0.313em; 
   }

/* first level */

#nav > ul
   {
    height: 3.75em; 
    background-color: #333;
   }
    #nav > ul > li
    {
     width: 25%;
     height: 100%;
     float: left;
     list-style: outside none none;
    }
     #nav > ul > li > a
     {
      height: 100%;
      font-size: 1.5em; 
      line-height: 2.5em; 
      text-align: center;
     }
      #nav > ul > li:not( :last-child ) > a
      {
       border-right: 1px solid #eee;
      }
      #nav > ul > li:hover > a,
      #nav > ul:not( :hover ) > li.active > a
      {
       background-color: #CCCCCC;
      }

/* second level */

#nav li ul
    {
     background-color: #999999;
     display: none;
     position: absolute;
     top: 100%;
    }
     #nav li:hover ul
     {
      display: block;
      left: 0;
      right: 0;
     }
      #nav li:not( :first-child ):hover ul
      {
       left: -1px;
      }
      #nav li ul a
      {
       font-size: 1.25em; 
       border-top: 1px solid #eee;
       padding: 0.75em; 
      }
       #nav li ul li a:hover,
       #nav li ul:not( :hover ) li.active a
       {
        background-color: #ccc;
       }

@media only screen and ( max-width: 62.5em ) /* 1000 */
  {
   #nav
   {
    width: 100%;
    position: static;
    margin: 0;
   }
  }

@media only screen and ( max-width: 40em ) /* 640 */
  {
   html
   {
    font-size: 75%; /* 12 */
   }

#nav
   {
    position: relative;
    top: auto;
    left: auto;
   }
    #nav > a
    {
     width: 3.125em; 
     height: 3.125em; 
     text-align: left;
     text-indent: -9999px;
     background-color: #ddd;
     position: relative;
    }
     #nav > a:before,
     #nav > a:after
     {
      position: absolute;
      border: 2px solid #fff;
      top: 35%;
      left: 25%;
      right: 25%;
      content: '';
     }
     #nav > a:after
     {
      top: 60%;
     }

#nav:not( :target ) > a:first-of-type,
    #nav:target > a:last-of-type
    {
     display: block;
    }

/* first level */

#nav > ul
   {
    height: auto;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
   }
    #nav:target > ul
    {
     display: block;
    }
    #nav > ul > li
    {
     width: 100%;
     float: none;
    }
     #nav > ul > li > a
     {
      height: auto;
      text-align: left;
      padding: 0 0.833em; 
     }
      #nav > ul > li:not( :last-child ) > a
      {
       border-right: none;
       border-bottom: 1px solid #eee;
      }

/* second level */

#nav li ul
    {
     position: static;
     padding: 1.25em; 
     padding-top: 0;
    }
  }

</style>
</head>

<body>

<nav id="nav" role="navigation">
 <a href="#nav" title="Show navigation">Show navigation</a>
 <a href="#" title="Hide navigation">Hide navigation</a>
 <ul class="clearfix">
  <li><a href="#">Home</a></li>
  <li>
   <a href="#" aria-haspopup="true"><span>Web Design</span></a>
   <ul>
    <li><a href="#">Design</a></li>
    <li><a href="#">GUI</a></li>
    <li><a href="#">Images</a></li>
    <li><a href="#">Codes</a></li>
   </ul>
  </li>
  <li>
   <a href="#" aria-haspopup="true"><span>Services</span></a>
   <ul>
    <li><a href="#">Web Design</a></li>
    <li><a href="#">Web Development</a></li>
    <li><a href="#">Web Images</a></li>
   </ul>
  </li>
  <li><a href="#">Contacts</a></li>
 </ul>
</nav>

</body>

</html>

Tuesday 10 March 2015

Drop-Down Navigation: Touch-Friendly and Responsive

create index.html

Create menu.js

No comments:

Post a Comment