配置單個級別下拉菜單

Question

我不太熟悉使用jquery/css。我添加了DropIt jquery插件的文件（http://dev7studios.com/dropit/）。

我期待做懸停我的例子。我可以使用幫助來實現它，因爲我的方法是完全錯誤的。我將代碼插入到我的ruby on rails項目中。

application.html.slim：

= stylesheet_link_tag "application", :media => "all" 
= javascript_include_tag "https://js.stripe.com/v2/","application" 
= javascript_include_tag "//www.google.com/jsapi", "chartkick" 
= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js","application" 
= javascript_include_tag "dropit.js","application" 
= stylesheet_link_tag "dropit" 

最終的結果看起來像這樣...

哪項是錯誤的。它應該是這樣的......

而當你將鼠標懸停在歡迎，用戶名，它會顯示在下拉菜單中。

具有錯誤執行的jQuery插件的當前代碼：

_header.html.slim

javascript: 
    $(document).ready(function() { 
     $('.menu').dropit(); 
    }); 

    #header 
    .wrapper 
     .login_sec 
     .col 
     ul.dropit 
      li.dropit-trigger.dropit-open 
      a href="" 
      =image_tag "login_icon1.png" 
      span 
       'Welcome, 
       = logged_in_user.username 
          ul.dropit-submenu 
       li 
       a href="#" Some Action 1 
       li 
       a href="#" Some Action 2 
       li 
       a href="#" Some Action 3 
       li 
       a href="#" Some Action 4 

      =image_tag "profile_link_img.png", class: 'img' 
     .col.col2 
      a href="/conversations" 
      =image_tag "login_icon2.png" 
      span Messages 
      /=image_tag "login_icon4.png", class: 'img4' 
      span class="messbg_icon" =unread_messages(current_user) 
      /=unread_messages(current_user) 
     .col.col3 
      a href="/logout" 
      =image_tag "login_icon3.png", class: 'img3' 

原始代碼而不jQuery插件：

#header 
    .wrapper 
     .login_sec 
     .col 
      a href="" 
      =image_tag "login_icon1.png" 
      span 
       'Welcome, 
       = logged_in_user.username 
      =image_tag "profile_link_img.png", class: 'img' 
     .col.col2 
      a href="/conversations" 
      =image_tag "login_icon2.png" 
      span Messages 
      /=image_tag "login_icon4.png", class: 'img4' 
      span class="messbg_icon" =unread_messages(current_user) 
      /=unread_messages(current_user) 
     .col.col3 
      a href="/logout" 
      =image_tag "login_icon3.png", class: 'img3' 

/資產/stylesheets/dropit.css：

.dropit { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
.dropit .dropit-trigger { position: relative; } 
.dropit .dropit-submenu { 
    position: absolute; 
    top: 100%; 
    left: 0; /* dropdown left or right */ 
    z-index: 1000; 
    display: none; 
    min-width: 150px; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
.dropit .dropit-open .dropit-submenu { display: block; } 

/assets/javascripts/dropit.js：

.dropit { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
.dropit .dropit-trigger { position: relative; } 
.dropit .dropit-submenu { 
    position: absolute; 
    top: 100%; 
    left: 0; /* dropdown left or right */ 
    z-index: 1000; 
    display: none; 
    min-width: 150px; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
.dropit .dropit-open .dropit-submenu { display: block; } 

Answer 1

我覺得你做它過於複雜。您只需使用HTML和一小部分CSS即可完成單層下拉菜單。

下面的代碼片段可能看起來像很多代碼，但只需要它的一小部分就可以使它在技術上起作用。剩下的只是爲了讓它看起來有點不錯，並且可以根據需要自定義它。我已添加評論以區分部件。

而且..沒有JavaScript，更不用說外部庫了。

對於更好的菜單，它可以響應點擊而不是隻是懸停，您可以看看this great tutorial by Koen Kivits。

/* This is what you actually, technically need */ 
 
.menu { 
 
    position: relative; 
 
} 
 

 
.menu .menu_items { 
 
    position: absolute; 
 
    display: none; 
 
} 
 

 
.menu:hover .menu_items { 
 
    display: block; 
 
} 
 

 
/* Stuff below is for show, for clarity, for not showing the background 
 
    through the menu items, etc, and to make it look a little nice. You 
 
    can keep this simple, or go wild. But make it your own! :) */ 
 
.menu { 
 
    color: grey; 
 
    background-color: #eee; 
 
} 
 

 
.menu .menu_items { 
 
    padding: 0.5em; 
 
    margin: 0;   
 
    background-color: white; 
 
    border: 1px solid #ccc; 
 
    border-radius: 7px; 
 
    list-style: none; 
 
    box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.5); 
 
} 
 

 
.menu .menu_items a { 
 
    text-decoration: none; 
 
    color: grey; 
 
} 
 
.menu .menu_items a:hover { 
 
    color: black; 
 
} 
 

 
.content { 
 
    background-color: skyblue; 
 
} 
 

 
i { 
 
    font-style: normal; 
 
    color: black; 
 
    font: 'wingdings'; 
 
} 
 

 
i.down:before { 
 
    content: '\25BE'; 
 
}

<!-- And here is all your HTML --> 
 
<nav class="menu"> 
 
    <i class="guy"></i>Welcome admin!<i class="down"></i> 
 
    <ul class="menu_items"> 
 
     <li><a href="">Action 1</a></li> 
 
     <li><a href="">Action 2</a></li> 
 
     <li><a href="">Action 3</a></li> 
 
     <li><a href="">Action 4</a></li> 
 
     <li><a href="">Action 5</a></li> 
 
    </ul> 
 
</nav> 
 

 
<!-- And some fake content to show that the menu actually hovers over it. --> 
 
<div class="content"> 
 
    Other content<br/> 
 
    goes here 
 
</div>

Answer 2

我的建議是使用Smartmenus的。使用很簡單：

下載從http://www.smartmenus.org/download/
下載jQuery的你「CSS」文件夾內所需的文件從http://jquery.com/download/
複製SM-核心css.css，也複製文件夾「SM-藍」所有內容都放在「css」文件夾中。
將jquery.smartmenus.js複製到「js」文件夾中。
將jquery-1.11.1.min.js複製到「js」文件夾中。 引用到HTML的身體部分在HTML文件中

<script src="js/jquery-1.11.1.min.js"></script> 
<script src="js/jquery.smartmenus.js"></script> 
<link href="css/sm-core-css.css" rel="stylesheet" /> 
<link href="css/sm-blue/sm-blue.css" rel="stylesheet" /> 

的頭部部分的文件，添加一個無序列表（UL）

<ul id="main-menu" class="sm sm-blue" style="z-index: 1001 !important; margin: auto"> 
    <li id="Home" title="back to home page"> 
     <a href="javascript:function1();" style="padding: 0px 10px">Top Opt1 </a> 
    </li> 
    <li id="AboutUs"> 
     <a href="#">Top Opt2</a> 
     <ul> 
      <li> 
       <a href="javascript:function2()">Option1</a> 
      </li> 
      <li> 
       <a href="javascript:function2()">Option2</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

- 最後，在你的$（document） 。已經添加：

$(document).ready(function() { $('#main-menu').smartmenus({ showTimeout: 0 }); });