меню на Bootstrap

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем ruslan216455, 26 июл 2013.

  1. ruslan216455

    ruslan216455

    Регистрация:
    6 ноя 2012
    Сообщения:
    220
    Симпатии:
    22
    Подскажите как сделать что бы при наведении выпадала меню сечайс срабатывает только при клике
    Bootstrap v2.3.2
    HTML:
    <ul class="nav nav-tabs menu visible-desktop">
    	<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">ЖИЛАЯ НЕДВИЖИМОСТЬ</a>		   
    				<ul class="dropdown-menu">
    										<li>Аренда квартир и комнат</a></li>
     
    						</ul>
     
    	  </li>	<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">КОММЕРЧЕСКАЯ НЕДВИЖИМОСТЬ</a>		   
    				<ul class="dropdown-menu">
    										<li>Офисы</a></li>
     
    						</ul>
     
    	  </li><li><a  href="/uslugi">Услуги</a></li>
    <li><a  href="/contact">Контакты</a></li>
    </ul>
     
  2. yurets86

    yurets86

    Регистрация:
    13 апр 2013
    Сообщения:
    394
    Симпатии:
    328
    это в js надо сменить функцию click на hover

    Код:
     /**
    	 * Плагин для twitter bootstrap, открывает dropdown меню при наведении, если оно находится внутри navbar
    	 * <div class="navbar" id="menu1">...</div>
    	 * <script type="javascript">$(document).ready(function(){
    	 *	 $('#menu1').dropdownMouse()
    	 * });</script>
    	 * @return {*}
    	 */
    	$.fn.dropdownMouse = function()
    	{
    		$.fn.dropdownMouse.shown = {};
    		$.fn.dropdownMouse.timeouts = {};
     
    		return $('li.dropdown',this).each(function(){
    			$(this).on('mouseover', function(){
    				$(this).addClass('open');
    				$.fn.dropdownMouse.shown[ this ] = 1;
    				clearTimeout( $.fn.dropdownMouse.timeouts[this] );
    			});
    			$(this).on('mouseout', function(event){
    				$.fn.dropdownMouse.shown[ this ] = 0;
    				$.fn.dropdownMouse.timeouts[this] = setTimeout($.proxy(function(){
    					if ( 0 == $.fn.dropdownMouse.shown[ this ] ) {
    						$(this).removeClass('open');
    					}
    				},this), 50);
    			});
    		});
    	};
     
  3. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.349
    Симпатии:
    1.380
    1. пример: http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/
    код: https://github.com/CWSpear/twitter-bootstrap-hover-dropdown

    2. Как вариант, можно добавить в css:
    HTML:
    ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;
    margin: 0;
    }
     
    a.menu:after, .dropdown-toggle:after {
    content: none;
    }
    но тут тоже есть подводные камни: если у выпадающего списка будет пункт с еще одним выпадающим списком, то будет косяк)