我正在努力让Bootstrap菜单在Joomla 3.1中使用下拉菜单。我快到了,但并不完全: 对于我使用的js脚本(How to make twitter bootstrap menu dropdown on hover rather than click)
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('.dropdown-toggle').dropdown();
// dropdown
$('.parent').addClass('dropdown');
$('.parent > a').addClass('dropdown-toggle');
$('.parent > a').attr('data-toggle', 'dropdown');
$('.parent > a').attr('data-target', '#');
$('.parent > a').append('<b class="caret"></b>');
$('.parent > ul').addClass('dropdown-menu');
$('.nav-child .parent').removeClass('dropdown');
$('.nav-child .parent .caret').css('display', 'none');
$('.nav-child .parent').addClass('dropdown-submenu');
});
})(jQuery);
</script>
我们的css(http://forum.joomla.org/viewtopic.php?f=706&t=770153)
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
这非常有效,有一点需要纠正:菜单栏中的链接仅用于显示菜单下的菜单。我需要的是让toplink也能正常工作。我怎么能这样做?
答案 0 :(得分:6)
不幸的是因为你需要&#34;点击&#34;在顶部菜单项上显示下面的下拉菜单,你不能在这个项目上有一个链接,它必须设置为href =&#34;#&#34;否则,每次点击它都会重新加载页面,因此不会显示下拉列表。如果您的设置确实有效,那么菜单会在&#34; hover&#34;并且不需要点击然后只需删除
$('.parent > a').attr('data-target', '#');
来自您的javascript,这将使菜单项上的链接保持原样(假设您已正确设置菜单项类型。
希望这有帮助
出于完整性,我在Joomla 3.2上使用以下内容
jQuery(document).ready(function(){
// dropdown
jQuery('.parent').addClass('dropdown');
jQuery('.parent > a').addClass('dropdown-toggle');
jQuery('.parent > a').attr('data-toggle', 'dropdown');
jQuery('.nav > .parent > a').attr('href','#');
jQuery('.parent > a').append('<span class="caret"></span>');
jQuery('.parent > ul').addClass('dropdown-menu');
jQuery('.nav-child .parent').removeClass('dropdown');
jQuery('.nav-child .parent').addClass('dropdown-submenu');
jQuery('.dropdown-submenu > a').removeAttr('class');
jQuery('.dropdown-submenu > a').removeAttr('data-toggle', 'dropdown');
jQuery('.dropdown-submenu > a > span').remove();
});
我不需要自定义我的css,除了更改颜色这是我的template.css中的css,它指的是导航栏布局,大多数只是自定义视觉信息而不是真正影响下拉列表。 / *自定义导航栏链接以填充.navbar * /
的整个空间.navbar .navbar-inner {
padding: 0;
font: Arial;
}
/* .navbar .nav {
margin: 0;
display: table;
width: 100%;*/
}
.navbar .nav li {
display: table-cell;
width: 1%;/* float: none;*/
}
.navbar .nav li a {
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
列夫