반응 상단 바

Question

나는 다음과 같은 HTML 코드가 있습니다

<div class="nine columns"> 
     <nav class="top-bar"> 
      <ul> 
      <li class="name"><h1><a href="#"> Please select your page</a></h1></li> 
      <li class="toggle-topbar"><a href="#"></a></li> 
      </ul> 
      <nav> 
      <ul class="right"> 
      @if (User.IsInRole("MetaAdmin")) 
      { 
       @Html.MenuItem("Admin", "Index", "Admin", "icon-lock") 
       @Html.MenuItem("Home", "Index", "Home", "icon-home") 
       if (System.Configuration.ConfigurationManager.AppSettings["companyName"].ToString() != "bobsbusiness") 
       { 
       @Html.MenuItem("Portfolio", "Index", "Portfolio", "icon-laptop") 
       } 
       @Html.MenuItem("Course", "Index", "Course", "icon-tasks") 
       @Html.MenuItem("Profile", "Index", "Profile", "icon-user") 
       @Html.MenuItem("Email", "Index", "Email", "icon-envelope")                      
       @Html.MenuItem("Contact", "Index", "Contact", "icon-comments") 
      } 
      else if (User.IsInRole("Admin")) 
      { 
       @Html.MenuItem("Admin", "Index", "Admin", "icon-lock") 
       @Html.MenuItem("Home", "Index", "Home", "icon-home") 
       @Html.MenuItem("Portfolio", "Index", "Portfolio", "icon-laptop") 
       @Html.MenuItem("Course", "Index", "Course", "icon-tasks") 
       @Html.MenuItem("Profile", "Index", "Profile", "icon-user") 
       @Html.MenuItem("Email", "Index", "Email", "icon-envelope") 
       @Html.MenuItem("Contact", "Index", "Contact", "icon-comments") 
      } 
      else if (User.IsInRole("CompanyManager")) 
      { 
       @Html.MenuItem("Admin", "Index", "Admin", "icon-lock") 
       @Html.MenuItem("Home", "Index", "Home", "icon-home") 
       @Html.MenuItem("Portfolio", "Index", "Portfolio", "icon-laptop") 
       @Html.MenuItem("Course", "Index", "Course", "icon-tasks") 
       @Html.MenuItem("Profile", "Index", "Profile", "icon-user") 
       @Html.MenuItem("Contact", "Index", "Contact", "icon-comments") 
      } 
      else if (User.IsInRole("StandardUser")) 
      { 
       @Html.MenuItem("Course", "Index", "Course", "icon-tasks") 
      } 
      else 
      {   
       @Html.MenuItem("Home", "Index", "Home", "icon-home") 
       if (System.Configuration.ConfigurationManager.AppSettings["companyName"].ToString() != "bobsbusiness") 
       { 
       @Html.MenuItem("Portfolio", "Index", "Portfolio", "icon-laptop") 
       } 
       @Html.MenuItem("Course", "Index", "Course", "icon-tasks") 
       @Html.MenuItem("Profile", "Index", "Profile", "icon-user") 
       @Html.MenuItem("Contact", "Index", "Contact", "icon-comments") 
      } 
      </ul> 
      </nav> 
     </nav> 
     </div> 

을 나는 특정 폭에서 드롭 다운 메뉴에 있지만 드롭 다운을 클릭시 상단의 메뉴 항목을 변경하는 미디어 쿼리를 사용하고 있습니다 그것은 확장하지 못하고있다. 필요한 CSS 파일을 포함 시켰습니다. 누구나 비슷한 문제가 발생 했습니까?

여기 http://jsfiddle.net/P8XfY/

Answer 1

난의 근본 원인을 확인할 수 없습니다 자바 스크립트 파일과 일부 충돌을 가졌다 JSFIDDLE. 나는 다음과 같은 자바 스크립트 코드를 작성했습니다, 그래서 내 문제를 해결 topbar 순자산 가치 (NAV)으로 확장 클래스를 추가 :

<div class="nine columns"> 
     <nav id="TopNavigation" class="top-bar"> 
      <ul id="toggle-topbar"> 
       <li class="name"><h1><a href="#"> Please select your page</a></h1></li> 
       <li class="toggle-topbar"><a id="toggleit" href="#"></a></li> 
      </ul> 
      <section> 
      <ul class="right"> 
      @if (User.IsInRole("MetaAdmin")) 
      { 
       @Html.MenuItem("Admin", "Index", "Admin", "icon-lock") 
       @Html.MenuItem("Home", "Index", "Home", "icon-home") 
       if (System.Configuration.ConfigurationManager.AppSettings["companyName"].ToString() != "bobsbusiness") 
       { 
       @Html.MenuItem("Portfolio", "Index", "Portfolio", "icon-laptop") 
       } 
       @Html.MenuItem("Course", "Index", "Course", "icon-tasks") 
       @Html.MenuItem("Profile", "Index", "Profile", "icon-user") 
       @Html.MenuItem("Email", "Index", "Email", "icon-envelope")                      
       @Html.MenuItem("Contact", "Index", "Contact", "icon-comments") 
      } 
      ................................