hover the sidebar vertical menu display a submenu in bootstrap material design - html

How to make a display of three columns as one submenu while hovering each menu.
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul class="vertical-nav">
<li>Link 1</li>
<li>Link 2
<ul class="sub-menu">
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
I want to make the menu like this below image


Please see below. Hope this helps.
$('.vertical-nav li a').mouseover(function() {
$(this).parent().find('.sub-menu').show();
})
.mouseout(function() {
$(this).parent().find('.sub-menu').hide();
});
.sub-menu {
display:none;
}
.vertical-nav li, .sub-menu li {
list-style:none;
}
.column {
float:left;
width: 100px;
}
.title {
padding-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul class="vertical-nav">
<li>Link 1</li>
<li>Link 2
<ul class="sub-menu">
<div class='column'>
<li class='title'>Style</li>
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</div>
<div class='column'>
<li class='title'>Subject</li>
<li>Sub Link 3</li>
<li>Sub Link 4</li>
</div>
<div class='column'>
<li class='title'>Medium</li>
<li>Sub Link 5</li>
<li>Sub Link 6</li>
</div>
</ul>
</li>
</ul>
</div>
</div>
</div>

Related

One Click on Nav Menu Trigger several actions

I have 3 menus in a nav and each menu has a submenu. I need to do 2 acts when clicking on a menu, or plus/minus sign.
First Act: When I click:
show this submenu
change this plus sign to minus sign
Close other submenus
Change other submenus signs from minus to plus
Second Act: When I click on an element which has an open submenu, again
submenu will be closed.
minus sign change to plus sign
My JQuery is working as expected on the First Act, but somehow it doesn't work on the Second Act
Please give me a hand. Thanks
$(function(showHidesubMenu) {
$('.parent-list').click(function() {
$(this)
.toggleClass('open').next().toggleClass('icon-minus icon-plus')
.add($('.parent-list.open').not(this).removeClass('open').next().toggleClass('icon-minus icon-plus'))
.parent().next('.child-layer').toggleClass('show')
})
})
$(function() {
$('.plus-minus').click(function() {
$(this)
.prev().toggleClass('open')
.next().toggleClass('icon-minus icon-plus')
.add($('.parent-list.open').not(this).removeClass('open'))
.parent().next('.child-layer').toggleClass("show");
})
})
li {
display: flex
}
.icon-plus:before {
content: "\2795";
}
.icon-minus:before {
content: "\2212";
}
.parent-list {
padding-right: 50px;
cursor: pointer;
}
.collapse {
display: none;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
<li class="non-active">
<a class="non-active parent-list" href="#level1">level 1</a>
<div class="plus-minus icon-plus"> </div>
</li>
<ul class="child-layer collapse">
<li>Sub Child 1</li>
<li>Sub Child 1</li>
<li>Sub Child 1</li>
</ul>
<li class="non-active">
<a class="non-active parent-list" href="#level2">level 2</a>
<div class="plus-minus icon-plus"> </div>
</li>
<ul class="child-layer collapse">
<li>Sub Child 2</li>
<li>Sub Child 2</li>
<li>Sub Child 2</li>
</ul>
<li class="non-active">
<a class="non-active parent-list" href="#level3">level 3</a>
<div class="plus-minus icon-plus"> </div>
</li>
<ul class="child-layer collapse">
<li>Sub Child 3</li>
<li>Sub Child 3</li>
<li>Sub Child 3</li>
</ul>
</ul>

$(function(showHidesubMenu) {
$('.parent-list').click(function() {
$(this)
.toggleClass('opening') // add class mark this opening
.next()
.toggleClass('icon-minus icon-plus')
.add(
$('.parent-list.opening')
.not(this)
.removeClass('opening')
.next()
.toggleClass('icon-minus icon-plus')
)
// to parent toogle ul
.parent()
.next('.child-layer')
.toggleClass('show')
})
})
li {
display: flex
}
.icon-plus:before {
content: "\2795";
}
.icon-minus:before {
content: "\2212";
}
.parent-list {
padding-right: 50px;
cursor: pointer;
}
.collapse {
display: none;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
<li class="non-active">
<a class="non-active parent-list" href="#level1">level 1</a>
<div class="plus-minus icon-plus"> </div>
</li>
<ul class="child-layer collapse">
<li>Sub Child 1</li>
<li>Sub Child 1</li>
<li>Sub Child 1</li>
</ul>
<li class="non-active">
<a class="non-active parent-list" href="#level2">level 2</a>
<div class="plus-minus icon-plus"> </div>
</li>
<ul class="child-layer collapse">
<li>Sub Child 2</li>
<li>Sub Child 2</li>
<li>Sub Child 2</li>
</ul>
<li class="non-active">
<a class="non-active parent-list" href="#level3">level 3</a>
<div class="plus-minus icon-plus"> </div>
</li>
<ul class="child-layer collapse">
<li>Sub Child 3</li>
<li>Sub Child 3</li>
<li>Sub Child 3</li>
</ul>
</ul>

How to select only the parent of an unordered list, using only CSS?

Without changing the HTML, which pains me, how do I only select the parent of an unordered list for CSS?
I have something like the following:
<div class="content">
<ul class="navigation">
<li>Item 1
<ul>
<li>Sub Item A</li>
<li>Sub Item B</li>
</ul>
</li>
<li>Item 2</li>
</ul>
</div>
I need to grab only Item 1 for altering it's CSS. I've attempted things like:
ul li a - won't work because it will grab Item 2
ul li a - won't work because it will grab Item 2
ul.navigation li - won't work because it will grab Item 2
ul:first-child - won't work because it will hit Item 1 and Sub Item A
Any thoughts?

You can do it like this:
.navigation > li:first-child > a {color: red}
<div class="content">
<ul class="navigation">
<li>Item 1
<ul>
<li>Sub Item A</li>
<li>Sub Item B</li>
</ul>
</li>
<li>Item 2</li>
</ul>
</div>
Or like this:
.navigation > li:first-of-type > a {color: red}
<div class="content">
<ul class="navigation">
<li>Item 1
<ul>
<li>Sub Item A</li>
<li>Sub Item B</li>
</ul>
</li>
<li>Item 2</li>
</ul>
</div>

How to display a ul list from left using Bootstrap?

On mouseover of Diveagar category one drop down list is displayed but it displays from that div only.
I want to display it from left Ex: from "Quick look" tab, I have used the following code to display the div when mouse is over.
<ul class="nav pull-left">
<li class="dropdown">
<p>
<a href="#" class="dropdown-toggle " style="color:black;" data-toggle="dropdown"><?php echo $sub_desti_res["sub_destination"]; ?><br> 2 Packages Available
</a>
</p>
<ul class="dropdown-menu">
<li>
<div class="destination-list">
<div class="col-md-12">

You mean like this?
* {margin: 0; padding: 0; list-style: none;}
.menu {display: block; text-align: center;}
.menu a {display: block; text-decoration: none; color: #333; border: 1px solid #999; padding: 5px; }
.menu > li {display: inline-block; position: relative; width: 100px;}
.menu ul {position: absolute; width: 150px; left: -25px; display: none;}
.menu > li:hover ul {display: block;}
<ul class="menu">
<li>
Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 4
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 5
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>

Put this CSS style:
.nav {position: relative;}
.dropdown-menu {position:absolute;left:0;width:100%;}

How to position ":before" element used as icon in zurb foundation's Side nav?

I added a sub-menu to foundation's side nav exactly like in this example, but the icon is above the text.
My CSS:
.hasChildren:before{
content: "\25ba";
float: left
}
.hasChildren.active:before{
content: "\25bc";
}
My HTML:
<div class="large-4 medium-4 columns menu-wrapper">
<div class="panel">
<h4>Menu</h4>
<ul class="side-nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link drop
<ul class="side-nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
</ul>
</div>
</div>
jQuery:
$('.side-nav li:has("ul")').children('ul').hide(); //hide submenu
$('.side-nav li:has("ul")').addClass('hasChildren'); // add class to li ul child
$('.side-nav li:has("ul")').click(function(){
$(this).toggleClass( "active" ) // add active class to clicked menu item
$(this).children('ul').slideToggle(); //toggle submenu
});
Image describing my problem
My problem on jsFiddle

Use relative positioning, like this:
.hasChildren:before{
content: "\25ba";
float: left;
position: relative;
top: 6px;
}
.hasChildren.active:before{
content: "\25bc";
}
Updated fiddle:
http://jsfiddle.net/vpoycbzb/1/

Three level CSS menu with first layer in horizontal layout

What I'm after is to have the top level ul lis laid out horizontally, and then subsequent levels laid out vertically, preferably indented slightly as levels go down, under their parent li.
Not after any hover functionality, just a nice layout, something like this:
Top Item 1 Top Item 2 Top Item 3
sub item 1 sub item 1 sub item 1
sub item 2 sub item 2 sub item 2
sub sub item 1 sub item 3 sub item 3
sub sub item 2 sub item 4 sub item 4
sub item 5 sub item 5 sub item 5

How about this:
Live Demo
CSS:
#footer {
overflow: auto;
background: #ddd
}
.outer {
list-style: none;
width: 33%;
float: left;
margin: 0;
padding: 0
}
.first {
font-weight: bold
}
.outer ul {
list-style: none;
margin: 0;
padding: 0 0 0 18px
}
HTML:
<div id="footer">
<ul class="outer">
<li class="first">Top Item 1</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
</ul>
</li>
<li>sub item 5</li>
</ul>
</li>
</ul>
<ul class="outer">
<li class="first">Top Item 2</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>sub item 3</li>
<li>sub item 4</li>
<li>sub item 5</li>
</ul>
</li>
</ul>
<ul class="outer">
<li class="first">Top Item 3</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>sub item 3</li>
<li>sub item 4</li>
<li>sub item 5</li>
</ul>
</li>
</ul>
</div>

here is a copy-paste stuff to play with:
<html>
<head>
<style>
li.level1 { float: left; display: inline; margin-right: 20px }
ul.level2 { display: inline }
li.level2 { display: block; padding-left: 20px }
ul.level3 { display: inline }
li.level3 { display: block; padding-left: 20px }
</style>
</head>
<body>
<ul class="level1">
<li class="level1">apple</li>
<li class="level1">banana
<ul class="level2">
<li class="level2">banana 1
<ul class="level3">
<li class="level3">banana 1 A</li>
<li class="level3">banana 1 B</li>
</ul>
</li>
<li class="level2">banana 2</li>
</ul>
</li>
<li class="level1">cherry
<ul class="level2">
<li class="level2">cherry 1</li>
<li class="level2">cherry 2</li>
</ul>
</li>
<li class="level1">dddd</li>
</ul>
</body>
</html>

Or if you want something pure css then how about something like this:
http://jsfiddle.net/pLFqd/2/
Edit: Missed the bit about not wanting hover functionality, try simple example attached