配置单级下拉菜单

Question

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

我本来想做 Hover Me 的例子。我可以使用帮助实现它，因为我的方法是完全错误的。我将代码插入我的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'

/assets/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/下载所需文件 从http://jquery.com/download/下载jquery 在你的＆＃34; css＆＃34;中复制sm-core-css.css文件夹，也是，复制文件夹＆＃34; sm-blue＆＃34;将所有内容都放在＆＃34; css＆＃39;文件夹。
将jquery.smartmenus.js复制到你的＆＃34; js＆＃34;文件夹。
将jquery-1.11.1.min.js复制到你的＆＃34; js＆＃34;夹。 引用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" />

在你的html的正文部分，添加一个无序列表（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>

- 最后，在你的$（文件）.ready中，添加：

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