Настройка одноуровневого выпадающего меню

Question

Я не слишком хорошо знаком с использованием jquery/css. Я добавил файлы для плагина jQuery DropIt (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' 

/активы /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 из http://jquery.com/download/
копирования см-ядро-css.css внутри папки «CSS», а также, скопируйте папку «см-синий» со всем содержимым в папке «css».
копия jquery.smartmenus.js внутри вашей папки «js».
копия jquery-1.11.1.min.js внутри вашей папки «js». ссылки на файлы в головной части вашего 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, add:

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