Question

任何人都可以帮我弄清楚如何伸展我的菜单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;
}

Answer 1

这应该让你顺利。诀窍是让你的导航在潜水中伸展。使用设定的宽度使导航相对，然后如图所示设置边距。类fullstretch的父div自动宽度= 100％朝向父级conbtainer。

        <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;
    }

Answer 2

有两种方式

纯css

添加此

    width: 100%

到你的导航css选择器。但是，如果你加载你的窗口没有占用整个屏幕，然后最大化它。你会注意到它没有保持完整的最大宽度。除非您再次使用最大窗口大小重新加载页面。

然而

使用javascript

获取窗口宽度
将导航设置为与窗口宽度相同的宽度（制作此选项作为一个功能。说功能A）
向窗口添加事件处理程序，以便在大小窗口更改时 - >运行功能A

希望这可以让您了解您的计划。

全拉伸水平菜单

2 个答案: