How can I add sub menu to my tabs?
Question
I have been struggling the whole morning trying to add dropdown menus to a simple tabbed content I have on my page. I'd like to have dropdown menus (containing 4 items) displayed when the user clicks on a tab. The dropdown menu should then stay visible until the user clicks on another tab.
Any idea how to implement it to the below? I guess it is pretty easy ...
Thanks so much!
<style type="text/css">
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #e9e9e9;
border-left: 1px solid #e9e9e9;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 21px ;
height: 31px;
line-height: 31px;
border: 1px solid #e9e9e9;
border-left: none;
font-weight: bold;
background: #EEEEEE;
overflow: hidden;
position: relative;
}
ul.tabs li:hover {
background: #4b4b4b;
}
ul.tabs li.active{
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.tab_container {
border: 1px solid #e9e9e9;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #FFFFFF;
}
.tab_content {
padding: 20px;
font-size: 13px;
font-family: arial;
color: #4b4b4b;
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
</script>
<html>
<ul class="tabs">
<li class="active" rel="tab1">TAB1</li>
<li rel="tab2">TAB2</li>
<li rel="tab3">TAB3</li>
</ul>
</html>
2 answers
solution1
0 ACCPTED 2014-08-14 13:16:41
Ok so scratch what i just did and check this one out. I think it might work better for what you're after. jsfiddle
you can change the a tags to li if you wish!
to edit the look of your active tab, watch for:
.active_tab{
}
and to edit the looks of your tab content edit:
.tabCont{
}
Hope it's right this time!
solution2
0 2014-08-14 13:38:34
I feel like i'm doing something bad with jQuery here, but the following code sounds like the thing you are after:
$('li').on('mouseover', function()
{
var subMenu = '<ul id="subM" style="padding-left:'+this.offsetLeft+'px"> <li>First</li> </ul>';
if(!$('#subM').length > 0)
{
$('body').append(subMenu);
}
});
$('li').on('mouseout', function()
{
if($('#subM').is(':hover'))
{
$('#subM').on('mouseout', function()
{
$('#subM').remove();
});
}
else
{
$('#subM').remove();
}
});
JsFiddle: http://jsfiddle.net/7s5szjkh/
I've left the code you had untouched, just edit the content of the sub menu variable to show what you want.
Plus I guess you might want different sub menus per tab, but this is just a starting point.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.