Erstes Mockup mit Gimp

horizontale navigation Horizontale Hauptnavigation:

<!-- TOP HEADER BAR / Start navigation on top in blau
=========================================== -->
	<header>
		<nav>
			<!-- nav menu -->
			<div id="feature6">
 <div class="container clearfix">
  <div class="grid_12">
  
<ul id='navi' >
 <?php wp_list_pages('title_li=&exclude=376,338' ); ?>
  <ul class="children">
  </ul>
   </ul>

  </div>
    </div>
      </div>
			
		</nav>
	</header>
<!-- TOP HEADER BAR / End
=========================================== -->

Und hier das CSS dazu

/*--------------------------------------
  Navigation
  ------------------------------------*/

/*suckerfish navi - sucker deaktiviert horizontale Hauptnavigation*/
                 
#navi {
     float:left; 
     padding-left:100px;
     margin:0px auto; 
      }
#navi li {
      float:left;
      list-style-type:none;
      color:black;
       padding:2px 3px 2px 2px; 
          }
#navi li a{
       display:block;
       text-decoration:none;
       padding:6px 8px 2px 8px;
        color:#FFFFFF;  
           }
#navi li a:hover{

}

#navi li sfhover {
      background:#efefef;
}
#navi li li {
      float:none;margin-left:-20px;
      }
#navi li li a{
      background:rgba(255,255,255,0.7);border:1px solid #c80c1b;
     padding-left:15px;
       color:#666666;
       }
#navi li li a:hover{
}
#navi li li sfhover {
     background:#efefef;
     color:#9b0b01;
     } 
 
#navi ul{
     position:absolute;
    
     font-size:16px;
      left:-9999px;
         }
         
#navi li:hover ul  {left:auto;}    menü einblenden 
#navi li.sfhover ul{left:auto;}


#navi li:hover ul  ul{left:-99999px;}    
#navi li:hover ul  ul ul{left:-99999px;}    
#navi li.sfhover ul  ul{left:-99999px;}    
#navi li li:hover ul, 
#navi li li li.sfhover ul{left:10em; top:.75em;}

/* aktiver button - navi */

#navi .current_page_item a {
border:1px solid #eef9ed;
text-decoration:none;
color:#000033;
}

.feature8 .current_page_item a {
background:#8B9F84;
text-decoration:none;
color:#000033;
}
#navi .current_page_parent {border:1px solid #eef9ed;}

 

Bitte teilen &

Blogartikel von mediendesign-quer. WordPress, Webdesign, Social Media .. Alle Neuigkeiten erfahren >> Werde Fan auf Facebook

Veröffentlicht in Kategorie:

Top