0

Anyone can help me figure out how to stretch out my menu like this 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 は、親 conbtainer に向かって自動的に width=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 に答える