充分伸展的橫向菜單

任何人都可以幫助我弄清楚如何伸出我的菜單這樣http://heatfreehair.com/充分伸展的橫向菜單

這裏是我是如何看現在http://dev1.envisionwebdesign.co/ 下面是WordPress的基於網站的PHP代碼。

<header id="header" class="col-full"> 
<nav id="navigation" class="col-full" role="navigation"> 

     <?php 
     if (function_exists('has_nav_menu') && has_nav_menu('primary-menu')) { 
      wp_nav_menu(array('depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'main-nav', 'menu_class' => 'nav fr', 'theme_location' => 'primary-menu')); 
     } else { 
     ?> 
     <ul id="main-nav" class="nav fl"> 
      <?php if (is_page()) $highlight = 'page_item'; else $highlight = 'page_item current_page_item'; ?> 
      <li class="<?php echo $highlight; ?>"><a href="<?php echo esc_url(home_url('/')); ?>"><?php _e('Home', 'woothemes'); ?></a></li> 
      <?php wp_list_pages('sort_column=menu_order&depth=6&title_li=&exclude='); ?> 
     </ul><!-- /#nav --> 
     <?php } ?> 

    </nav><!-- /#navigation --> 
</header><!-- /#header -->

下面是CSS

#navigation { 
float: left; 
clear: both; 
margin-bottom: 0; 
display: none; 
} 
#header #navigation { 
display: block !important; 
margin-top: 150px; 
} 
#header #navigation ul.nav { 
float: left; 
} 

#header #navigation ul.nav > li a { 
background: #000000; 
float: left; 
height: 30px; 
line-height: 30px; 
display: block; 
font-family: "Agency", Verdana; 
font-size: 21px; 
font-weight: normal; 
color: #ffffff; 
height: 30px; 
    padding: 0 44px; 
-webkit-transition: all 0.4s ease-in-out; 
-moz-transition: all 0.4s ease-in-out; 
-o-transition: all 0.4s ease-in-out; 
text-transform: uppercase; 
} 
#header #navigation ul.nav > li a:hover { 
border-color: #e8e3e5; 
background: #000000; 
color: #f91483; 
} 
#header #navigation ul.nav > li:hover a { 
background: #fff; 
} 
#header #navigation ul.nav > li.current-menu-item > a, 
#header #navigation ul.nav > li.current_page_item > a { 
color: #f91483; 
} 
#header #navigation ul.nav > li.parent a { 
-webkit-border-bottom-left-radius: 0; 
-webkit-border-bottom-right-radius: 0; 
border-bottom-left-radius: 0; 
border-bottom-right-radius: 0; 
-moz-background-clip: padding; 
-webkit-background-clip: padding-box; 
background-clip: padding-box; 
} 
#header #navigation ul.nav > li.parent a:after { 
font-family: 'Agency'; 
display: inline-block; 
font-size: .857em; 
margin-left: .618em; 
content: ";"; 
color: #ffffff; 
font-weight: normal; 
} 
#header #navigation ul.nav > li.parent a:hover:before { 
content: ""; 
display: block; 
height: 2px; 
position: absolute; 
bottom: -1px; 
left: 0; 
right: 0; 
background: #fff; 
z-index: 99999; 
} 
#header #navigation ul.nav > li.parent:hover a:before { 
content: ""; 
display: block; 
height: 2px; 
position: absolute; 
bottom: -1px; 
left: 0; 
right: 0; 
background: #fff; 
z-index: 99999; 
} 
#header #navigation ul.nav > li.parent:hover a:after { 
color: #ff007b; 
} 
#header #navigation ul.nav > li.parent ul li a:after { 
visibility: hidden; 
} 
#header #navigation ul.nav > li.parent ul li.parent a:after { 
visibility: visible; 
content: "]"; 
float: right; 
} 
#header #navigation ul.nav > li.parent ul li.parent ul li a:after { 
visibility: hidden; 
} 
#header #navigation ul.nav > li.parent ul li.parent ul li.parent a:after { 
visibility: visible; 
content: "]"; 
} 
#header #navigation ul.nav > li.parent ul li.parent ul li.parent ul li a:after { 
visibility: hidden; 
} 
#header #navigation ul.nav ul { 
border: none; 
margin-top: -1px; 
padding: .372em 0; 
box-shadow: 0 0.202em 0 0 rgba(232, 227, 229, 0.4); 
-webkit-box-shadow: 0 0.202em 0 0 rgba(232, 227, 229, 0.4); 
background: #fff; 
} 

#header #navigation ul.nav ul ul { 
left: 100%; 
top: -0.372em; 
} 
h3.nav-toggle { 
display: none; 
}

來源

2013-03-18 Vim Bonsu

這應該讓你對你的方式。訣竅是讓你的導航裏面延伸的潛水。按照設定的寬度製作導航欄，然後設置頁邊距，如圖所示。帶有類全伸的父div自動向父容器的寬度= 100％。

 <div class="fullstretch"> 
       <nav></nav> 
      </div> 

    body { 
     margin:0; 
     }  
    .fullstretch { 
     position: relative; 
     background: #000; 
     padding: 5px 0; 
    } 
    .fullstretch nav { 
     width: 800px; 
     position: relative; 
     margin: 0 auto; 
     background: #fff; 
    }

來源

2013-03-18 19:35:37 Daniel

有2種方式

純CSS

添加此

width: 100%

到您的導航CSS選擇器。但是，如果您在不佔用整個屏幕的情況下加載窗口，然後將其最大化。你會注意到它不會保持最大寬度。除非你用最大的窗口大小重新加載頁面。

然而

使用javascript

獲取窗口寬度
設置導航是相同的寬度爲窗口寬度（使這個的功能。說功能A）
將事件處理函數添加到windo W，以便當大小窗口更改 - >運行功能A

希望這給你一個你的計劃的想法。

來源

2013-03-18 19:45:28 AFwcxx

充分伸展的橫向菜單

回答

相關問題