전체 스트레치 수평 메뉴

Question

사람은 여기 내 잘 찾고 지금 아래 http://dev1.envisionwebdesign.co/ 가 워드 프레스 기반 사이트의 PHP 코드입니다 방법은 나를이 http://heatfreehair.com/

처럼 내 메뉴를 스트레칭하는 방법을 알아낼 수 있습니다.

<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는 자동으로 부모 컨베이어쪽으로 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; 
    } 

Answer 2

는

가 탐색 CSS의 선택이

width: 100% 

추가 2 가지 방법

순수 CSS가 있습니다. 그러나 만약 당신이 전체 화면을 점령하지 않고 창을로드 한 다음 최대화하십시오. 너비가 최대 값을 유지하지 못한다는 것을 알게 될 것입니다. 물론 최대 창 크기로 다시 페이지를 다시로드하는 경우가 아니면

그러나 자바 스크립트

1. 와

   창 폭 윈도우 폭 (함수로이 을 같은 폭으로 탐색을 설정

2. 를 가져옵니다. 기능을 말한다 A)

3. windo에 이벤트 처리기 추가 w 그렇게하면 크기 창이 변할 때 -> 함수 A가 실행됩니다.

희망 사항은 계획에 대한 아이디어를 제공합니다.