Learn2New

This post is related to navigation :- Very low wait navigation example, only by HTML and CSS basics

HTML Code

      <div class="menu_comp">
            <ul>
             <li class="selected"><a href="#">About us</a></li>
             <li><a href="#">Menu - 1</a>
                  <ul>
              <li><a href="#">Menu level 1</a></li>
              <li><a href="#">Menu level 2</a></li>
               </ul>  
                </li>
                <li><a href="#">Menu - 2</a>
                    <ul>
              <li><a href="#">Menu level 1</a>
                     <ul>
               <li><a href="#">Kanha Sahu</a></li>
               <li><a href="#">9755685222</a></li>
               <li><a href="#">Bangalore</a></li>
                 </ul>  
                    </li>
                    </ul>
                </li>
             <li><a href="#">Portfolio</a></li>
             <li><a href="#">Reviews</a></li>
                </ul>   
            
            </div>

CSS Code

<style type="text/css">

/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}

/* ------------------------------------- */

.menu_comp{
 margin:3px auto;
 }
.menu_comp ul{
 width:auto;
 height:45px;
 line-height:45px;
 display:block;
 }
.menu_comp ul li{
 float:left;
 background:#FAFAFC;
 }
.menu_comp ul li a{
 float:left;
 padding:0px 8px;
 margin:0 1px 0 0;
 color:#666;
 
 -moz-box-shadow:0 1px 1px #CCCCCC;
 -webkit-box-shadow:0 1px 1px #CCCCCC;
 -o-box-shadow:0 1px 1px #CCCCCC;
 -ms-box-shadow:0 1px 1px #CCCCCC;
 box-shadow:0 1px 1px #CCCCCC;
 }
.menu_comp ul li a:hover{
 background:#FFFFFF;
 color:#333;
 
 -moz-box-shadow:0 1px 3px #CCCCCC;
 -webkit-box-shadow:0 1px 3px #CCCCCC;
 -o-box-shadow:0 1px 3px #CCCCCC;
 -ms-box-shadow:0 1px 3px #CCCCCC;
 box-shadow:0 1px 3px #CCCCCC;  
 }
.selected,
.selected a{
 border-bottom:1px solid #F00;}
 
.selected a,
.menu_comp ul li:hover,
.menu_comp ul li a:hover{
 background:#FFFFFF;
 color:#333;}

.menu_comp ul li a img{
 position:relative;
 width:auto;
 height:18px;
 padding:0 2px;
 top:4px;}
.menu_comp ul li ul{
 display:none;
 } 
.menu_comp ul li:hover > ul{
 clear:both;
 display:block;
 position:absolute;
 width:auto;
 height:auto;
 margin-top:45px;
 
 
 -moz-box-shadow:0 2px 3px #666666;
 -webkit-box-shadow:0 2px 3px #666666;
 -o-box-shadow:0 2px 3px #666666;
 -ms-box-shadow:0 2px 3px #666666;
 box-shadow:0 2px 3px #666666;
 } 
.menu_comp ul li:hover ul li{
 float:none;
 width:auto;
 height:auto;
 display:block;
 margin:0;
 } 

.menu_comp ul li:hover ul li:first-child a{
 /*border-top:1px solid #CCC;*/
 }
.menu_comp ul li:hover ul li:last-child a{
 border-bottom:2px solid #CCC;
 }
.menu_comp ul li:hover ul li a{
 padding:0px 8px;
 margin:1px 0 0 0;
 color:#666;
 background:#FAFAFA;
 width:100%;
 
 /*background:#f5f5f5;*/
 
 -moz-box-shadow:0 1px 1px #CCCCCC;
 -webkit-box-shadow:0 1px 1px #CCCCCC;
 -o-box-shadow:0 1px 1px #CCCCCC;
 -ms-box-shadow:0 1px 1px #CCCCCC;
 box-shadow:0 1px 1px #CCCCCC;
 }
.menu_comp ul li:hover ul li a:hover{
 background:#FFFFFF;
 color:#333;
 }
 

.menu_comp ul li:hover ul li a ul{
 display:none;
 }
.menu_comp ul li:hover ul li:hover ul{
 display:block;
 background:#FFFFFF;
 color:#333;
 margin-left:100px;
 margin-top:-0px;
 position:absolute;
 }
</style>

How to download

http://filepi.com/i/bQ8CoyT

Pages

Sunday, 7 September 2014

No comments:

Post a Comment