我想重新格式化我的CSS和jQuery代碼的下拉菜單

-1

我有下面的代碼工作正常的下拉菜單但我需要修改CSS和jQuery。我想重新格式化我的CSS和jQuery代碼的下拉菜單

需要增加主箱和降低第一圖標排

但當i try到decrease the width這是decrease whole box width

請指導。 FIDDLE LINK http://fiddle.jshell.net/6pLPn/

enter image description here 代碼：

<html> 
    <head> 
     <meta charset="utf-8"> 
     <title></title> 
     <meta name="viewport" content="width=device-width,initial-scale=1.0"> 

    </head> 
    <body> 
     <div class="header"> 
      <div class="logo"> 
      JQUERY DEMO 
      </div> 
      <ul class="nav"> 
       <li class="nav-link"> 

       </li> 
      </ul> 
     </div> 

     <!-- Clickable Nav --> 
     <div class="click-nav"> 
      <ul class="no-js"> 
       <li> 
        <a class="clicker"><img src="img/i-1.png" alt="Icon">Profile</a> 
        <ul> 
         <li><a href="#"><img src="img/i-2.png" alt="Icon">Dashboard</a></li> 
         <li><a href="#"><img src="img/i-3.png" alt="Icon">Settings</a></li> 
         <li><a href="#"><img src="img/i-4.png" alt="Icon">Privacy</a></li> 
         <li><a href="#"><img src="img/i-5.png" alt="Icon">Help</a></li> 
         <li><a href="#"><img src="img/i-6.png" alt="Icon">Sign out</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
     <!-- /Clickable Nav --> 

     <!-- jQuery --> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script> 
     $(function() { 
      // Clickable Dropdown 
      $('.click-nav > ul').toggleClass('no-js js'); 
      $('.click-nav .js ul').hide(); 
      $('.click-nav .js').click(function(e) { 
       $('.click-nav .js ul').slideToggle(200); 
       $('.clicker').toggleClass('active'); 
       e.stopPropagation(); 
      }); 
      $(document).click(function() { 
       if ($('.click-nav .js ul').is(':visible')) { 
        $('.click-nav .js ul', this).slideUp(); 
        $('.clicker').removeClass('active'); 
       } 
      }); 
     }); 
     </script> 




    </body> 
</html>

來源

2013-10-15 Neo

這裏的一切的寬度設置在容器DIV <div class="click-nav">。在CSS中定義的寬度爲200px。

<a><li>內的標籤設置爲display: block，使它們填充該父容器的寬度。

要使「第一個圖標行」更小，您可以使用.clicker類來定位它。

.clicker { 
    width: 100px; /* or use a percentage like 50% */ 
}

而爲了讓「主箱」長大了，你可以添加一個寬度大於200至.click-nav ul li ul這已經是有針對性的在CSS較大。例如。

.click-nav ul li ul { 
    width: 250px; /* or use a percentage like 125% */ 
}

Updated your fiddle here.

那是你的意思？確切地理解問題是什麼很難。

來源

2013-10-15 05:54:00 davidpauljunior

非常感謝我需要的東西，抱歉錯過了對話。但它只減少寬度，當我點擊相同的第一行，然後也擴大。需要減少第一列的長度以及它在該部分點擊的長度應該用於展開菜單。 – Neo

你實際上並沒有在你的小提琴中包含jQuery庫，所以它回落到了非js版本，即在懸停時顯示菜單。我在這裏添加了jQuery庫到更新的小提琴http://fiddle.jshell.net/6pLPn/5/。如果你看一看，你能解釋一下問題是什麼嗎？ – davidpauljunior

我想重新格式化我的CSS和jQuery代碼的下拉菜單

回答

相關問題