0

任何人都可以帮助我弄清楚如何像这样扩展我的菜单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;
}
4

2 回答 2

0

有2种方式

纯CSS

添加这个

    width: 100%

到您的导航 CSS 选择器。但是，如果您在不占用整个屏幕的情况下加载窗口，然后将其最大化。您会注意到它并没有保持最大宽度不变。除非您再次使用最大窗口大小重新加载页面。

然而

用 javascript

  1. 获取窗口宽度

  2. 将导航设置为与窗口宽度相同的宽度（将其设为函数。比如说函数 A）

  3. 将事件处理程序添加到窗口，以便在大小窗口更改时 --> 运行函数 A

希望这能让您对您的计划有所了解。

于 2013-03-18T19:45:28.973 回答
0

这应该让你上路。诀窍是让你的导航进入延伸的潜水。使导航相对于设置的宽度，然后设置边距，如图所示。具有类 fullstretch 的父 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-18T19:35:37.653 回答