配置单个级别下拉菜单

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 }); });