I'm new in jQuery, please help me to fix this case. every time I click it, the link will multiply. how can I stop append function only once, Please help me.
$(".dl-trigger").click(function() {
$("#ChildCat a").each(function() {
var cat = $(this);
$("<a />", {
"href": cat.attr("href"),
"text": cat.text()
}).appendTo("#dlmenu");
});
$("#dlmenu").slideDown("slow");
});
FIDDLE
Use one() method in jQuery, the handler execute once per element.
$(".dl-trigger").one('click', function() {
$("#ChildCat a").each(function() {
var cat = $(this);
$("<a />", {
"href": cat.attr("href"),
"text": cat.text()
}).appendTo("#dlmenu");
});
$("#dlmenu").slideDown("slow");
});
.clear {
clear: both;
float: none;
display: block;
}
.container {
max-width: 990px;
width: 100%;
margin: 0 auto;
}
.inner {
padding: 0px 10px;
}
#main {
margin: 10px auto;
}
.grid-two {
width: 50%;
}
[class*='grid-'] {
float: left;
display: block;
position: relative;
}
#header {
width: 100%;
line-height: 60px;
background: #FFF;
border-top: 4px solid #33AB83;
border-bottom: 1px solid #FEFEFE;
box-shadow: 0px 1px 1px #EEE;
position: relative;
left: -5px;
}
#topmenu {
display: none;
}
span.dl-trigger {
width: 30px;
height: 35px;
line-height: 35px;
text-align: center;
background: #33AB83;
color: #FFF;
padding: 15px 15px;
cursor: pointer;
position: absolute;
top: -4px;
right: -15px;
font-weight: bold;
}
#dlmenu {
width: 100%;
height: 100%;
background: #33AB83;
padding: 0px 15px;
position: relative;
left: -20px;
top: -15px;
display: none;
}
#dlmenu a {
width: 100%;
display: block;
padding: 5px 15px;
margin-left: -15px;
border-top: 1px solid #2a9471;
border-bottom: 1px solid #36b88d;
color: #296d56;
display: block;
text-shadow: 1px 1px 0px #49c39a;
}
#dlmenu a:hover {
background: #3bc094;
}
a {
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<div class="container">
<div class="inner">
<div id="logo" class="grid-two">
<a title="Test Menu" href="http://localhost/">PLEASE CLICK on MENU ICON</a>
</div>
<!-- end of #logo -->
<div id="navigation" class="grid-two">
<span class="dl-trigger button green">☰</span>
<ul id="topmenu">
<li class="ParentCat">
<span><i class="fa fa-navicon" aria-hidden="true"></i> Parent Category</span>
<ul id="ChildCat">
<li>Category Category A
</li>
<li>Category B
</li>
<li>Category C
</li>
<li>Category D
</li>
<li>Category Category A
</li>
<li>Category B
</li>
<li>Category C
</li>
<li>Category D
</li>
</ul>
</li>
</ul>
</div>
<!-- end of #navigation -->
<div class="clear"></div>
</div>
<!-- end of .inner -->
</div>
<!-- end of .container -->
</header>
<!-- end of #header -->
<div id="main">
<div class="wrapper">
<div class="inner">
<div id="dlmenu"></div>
</div>
</div>
</div>
UPDATE :
If you just want to toggle the menu on click, then you can use slideToggle() as #A.Wolff suggested.
$(".dl-trigger").click(function() {
$("#dlmenu").slideToggle("slow");
});
$("#ChildCat a").appendTo("#dlmenu");
.clear {
clear: both;
float: none;
display: block;
}
.container {
max-width: 990px;
width: 100%;
margin: 0 auto;
}
.inner {
padding: 0px 10px;
}
#main {
margin: 10px auto;
}
.grid-two {
width: 50%;
}
[class*='grid-'] {
float: left;
display: block;
position: relative;
}
#header {
width: 100%;
line-height: 60px;
background: #FFF;
border-top: 4px solid #33AB83;
border-bottom: 1px solid #FEFEFE;
box-shadow: 0px 1px 1px #EEE;
position: relative;
left: -5px;
}
#topmenu {
display: none;
}
span.dl-trigger {
width: 30px;
height: 35px;
line-height: 35px;
text-align: center;
background: #33AB83;
color: #FFF;
padding: 15px 15px;
cursor: pointer;
position: absolute;
top: -4px;
right: -15px;
font-weight: bold;
}
#dlmenu {
width: 100%;
height: 100%;
background: #33AB83;
padding: 0px 15px;
position: relative;
left: -20px;
top: -15px;
display: none;
}
#dlmenu a {
width: 100%;
display: block;
padding: 5px 15px;
margin-left: -15px;
border-top: 1px solid #2a9471;
border-bottom: 1px solid #36b88d;
color: #296d56;
display: block;
text-shadow: 1px 1px 0px #49c39a;
}
#dlmenu a:hover {
background: #3bc094;
}
a {
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<div class="container">
<div class="inner">
<div id="logo" class="grid-two">
<a title="Test Menu" href="http://localhost/">PLEASE CLICK on MENU ICON</a>
</div>
<!-- end of #logo -->
<div id="navigation" class="grid-two">
<span class="dl-trigger button green">☰</span>
<ul id="topmenu">
<li class="ParentCat">
<span><i class="fa fa-navicon" aria-hidden="true"></i> Parent Category</span>
<ul id="ChildCat">
<li>Category Category A
</li>
<li>Category B
</li>
<li>Category C
</li>
<li>Category D
</li>
<li>Category Category A
</li>
<li>Category B
</li>
<li>Category C
</li>
<li>Category D
</li>
</ul>
</li>
</ul>
</div>
<!-- end of #navigation -->
<div class="clear"></div>
</div>
<!-- end of .inner -->
</div>
<!-- end of .container -->
</header>
<!-- end of #header -->
<div id="main">
<div class="wrapper">
<div class="inner">
<div id="dlmenu"></div>
</div>
</div>
</div>
Related
Totally baffled because this should be so simple. I have a jquery tab structure. Within the first tab I've inserted a div container that appears as a yellow box. Inside this yellow box div I'm trying to insert a div. container that appears as a red box.
But I can't get the red box to appear inside the yellow box. I've tried the usual positioning and z-index, etc but strangely nothing works. I think I've become blind to the obvious.
Fiddle: https://jsfiddle.net/k1kphcm8/
$('.tabs-nav a').on('click', function(event) {
event.preventDefault();
$('.tab-active').removeClass('tab-active');
$(this).parent().addClass('tab-active');
$('.TabContainerClass div').hide();
$($(this).attr('href')).fadeIn(300)
});
$('.tabs-nav a:first').trigger('click'); // Default
.tabs-nav {
list-style: none;
margin: 0;
padding: 0;
}
.tabs-nav .tab-active a {
background: white;
font-size: 13px;
border-width: 1px;
border-bottom-color: white;
border-top-color: darkorange;
border-left-color: darkorange;
border-right-color: darkorange;
}
.tabs-nav a {
border-width: 0px 1px 1px 0px;
border-style: solid;
border-bottom-color: darkorange;
border-right-color: #C9C9C9;
background: #E6E6E6;
color: #7A7A7A;
display: block;
font-size: 12px;
height: 32px;
line-height: 32px;
text-align: center;
width: 122px;
}
.tabs-nav li {
float: left;
}
.TabContainerClass {
width: 491px;
height: 250px;
border: 1px solid darkorange;
border-top: 0;
clear: both;
position: relative;
background: white;
}
.YellowDivClass {
position: absolute;
background-color: yellow;
width: 350px;
height: 200px;
margin: 30px 0px 0px 20px;
z-index: 1;
}
.RedDivClass {
position: absolute;
background-color: red;
z-index: 10;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul class="tabs-nav">
<li class="tab-active">Countries
</li>
<li class="">Year
</li>
<li class="">Materials
</li>
<li class="">Products
</li>
</ul>
<div class="TabContainerClass">
<div id="YellowDiv" class="YellowDivClass">
<div id="RedDiv" class="RedDivClass"></div>
</div>
<div id="tab-2" style="display: none;">
<p>This is TAB 2</p>
</div>
<div id="tab-3" style="display: none;">
<p>This is TAB 3.</p>
</div>
<div id="tab-4" style="display: none;">
<p>This is TAB 4.</p>
</div>
</div>
To hide all the inactive tabs you are using:
$('.TabContainerClass div').hide();
which hides all the divs inside TabContainerClass which is not intended. Instead use this to hide only the direct children of TabContainerClass:
$('.TabContainerClass > div').hide();
UPDATED FIDDLE
$('.tabs-nav a').on('click', function(event) {
event.preventDefault();
$('.tab-active').removeClass('tab-active');
$(this).parent().addClass('tab-active');
$('.TabContainerClass > div').hide();
$($(this).attr('href')).fadeIn(300)
});
$('.tabs-nav a:first').trigger('click'); // Default
.tabs-nav {
list-style: none;
margin: 0;
padding: 0;
}
.tabs-nav .tab-active a {
background: white;
font-size: 13px;
border-width: 1px;
border-bottom-color: white;
border-top-color: darkorange;
border-left-color: darkorange;
border-right-color: darkorange;
}
.tabs-nav a {
border-width: 0px 1px 1px 0px;
border-style: solid;
border-bottom-color: darkorange;
border-right-color: #C9C9C9;
background: #E6E6E6;
color: #7A7A7A;
display: block;
font-size: 12px;
height: 32px;
line-height: 32px;
text-align: center;
width: 122px;
}
.tabs-nav li {
float: left;
}
.TabContainerClass {
width: 491px;
height: 250px;
border: 1px solid darkorange;
border-top: 0;
clear: both;
position: relative;
background: white;
}
.YellowDivClass {
position: absolute;
background-color: yellow;
width: 350px;
height: 200px;
margin: 30px 0px 0px 20px;
z-index: 1;
}
.RedDivClass {
position: absolute;
background-color: red;
z-index: 10;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul class="tabs-nav">
<li class="tab-active">Countries
</li>
<li class="">Year
</li>
<li class="">Materials
</li>
<li class="">Products
</li>
</ul>
<div class="TabContainerClass">
<div id="YellowDiv" class="YellowDivClass">
<div id="RedDiv" class="RedDivClass"></div>
</div>
<div id="tab-2" style="display: none;">
<p>This is TAB 2</p>
</div>
<div id="tab-3" style="display: none;">
<p>This is TAB 3.</p>
</div>
<div id="tab-4" style="display: none;">
<p>This is TAB 4.</p>
</div>
</div>
The problem one of your selectors. You are hiddding every div element instead of hidden only direct div elements. So instead of $('.TabContainerClass div').hide();. You should have $('.TabContainerClass > div').hide();
I was just wondering how I can obtain this kind of UI design using HTML/CSS:
It should be that every time a user inputs a new data, it'll display the data with a divider and a bullet.
I am new to these kind of UI design in terms of HTML/CSS.
This is pretty darn close.. Only things I can think of are that you will need to tweak the fixed sizes for your font and that it is probably not going to be pretty on a mobile device. https://jsfiddle.net/x6bthxgw/
HTML:
/* CSS: */
body {
font-family: sans-serif;
}
ul.pretty-list {
border-left: 1px solid grey;
padding-left: 16px;
margin-left: 200px;
text-transform: uppercase;
}
ul.pretty-list li {
list-style: none;
}
ul.pretty-list ul {
padding-left: 0px;
}
ul.pretty-list h4 {
color: skyblue;
position: relative;
}
ul.pretty-list .date {
margin-left:-216px;
width:184px;
text-align: right;
padding-right: 1em;
float: left;
position:relative;
}
ul.pretty-list .date:after {
content:"•";
position: absolute;
right:-10px;
width:21px;
font-size:30px;
line-height:18px;
text-align:center;
}
<ul class="pretty-list">
<li>
<h4><div class="date">2015 - Present</div>Item 1</h4>
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
<li>Subitem 4</li>
</ul>
</li>
<li>
<h4><div class="date">2014 - 2015</div>Item 2</h4>
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
<li>Subitem 4</li>
</ul>
</li>
</ul>
Try the snippet below. I dont know for certain if is this what you need. This CSS is written on simple logic:
.full-width {
float:left;
width:100%;
display:flex;
}
.first_box {
width:300px;
display:inline-block;
text-align:right;
font-size:15px;
padding-right:15px;
}
.second_box {
width:400px;
display:inline-block;
text-align:left;
padding-left:30px;
font-size:15px;
border-left:2px solid #069;
position:relative;
}
.second_box:after {
content:"";
position:absolute;
left:-8px;
top:8px;
background:#900;
width:15px;
height:15px;
border-radius:50%;
}
.second_box h2 , .first_box h2 {
margin:0;
}
<div class="full-width">
<div class="first_box">
<h2>2015 present</h2>
</div><!-- /.first_box -->
<div class="second_box">
<h2>frontend web Developer</h2>
<p>something here</p>
<p>something here</p>
<p>something here</p>
</div><!-- /.second_box -->
</div><!-- /.full-width -->
<div class="full-width">
<div class="first_box">
<h2>2015 present</h2>
</div><!-- /.first_box -->
<div class="second_box">
<h2>frontend web Developer</h2>
<p>something here</p>
<p>something here</p>
<p>something here</p>
</div><!-- /.second_box -->
</div><!-- /.full-width -->
You can try this. It is a simple structure to follow.
<div class="abc">
<div class="abc3">
<div class="abc2">
2016 - Present
<span class="abc1"></span>
</div>
<div class="abc2">
Front End Developer
</div>
</div>
<div class="abc3">
<div class="abc2"></div>
<div class="abc2"></div>
</div>
</div>
<style>
.abc{
display: table;
background: grey;
width: 350px;
height: 450px;
position: absolute;
left: 250px;
top: 150px;
text-align: center;
}
.abc1{
width: 20px;
display: inline-block;
height: 20px;
position: relative;
right: -42px;
background: red;
z-index: 100;
border-radius: 50%;
}
.abc2 {
display: table-cell;
width: 50%;
border-right: 1px solid blue;
}
.abc3{
display: table-row;
}
</style>
Try using the code below:
<ul>
<li>
<span class="text-left">2015-Present</span>
<span class="bullet"></span>
<span class="text-right">Developer</span>
</li>
<li>
<span class="text-left">2015-Present</span>
<span class="bullet"></span>
<span class="text-right">Developer</span>
</li>
<li>
<span class="text-left">2015-Present</span>
<span class="bullet"></span>
<span class="text-right">Developer</span>
</li>
</ul>
CSS:
ul {
list-style: none;
width: 300px;
}
ul li {
position: relative;
}
ul li span {
width: calc(100%/3);
display: inline-block;
}
ul li:before {
content: '';
position: absolute;
top: 15px;
left: 107px;
height: 90%;
width: 2px;
background: #cccccc;
}
.bullet {
width: 7px;
height: 7px;
display: inline-block;
border-radius: 50%;
background-color: blue;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right
}
Please arrange positions and text according to the requirement.
Just try with the below link: DEMO
<div style="
display: table;
background: yellow;
width: 350px;
height: 450px;
position: absolute;
left: 250px;
top: 150px;
text-align: center;
"><div style="
display: table-row;
"><div style="
display: table-cell;
width: 50%;
border-right: 1px solid blue;
">2015 - Present<span style="
width: 20px;
display: inline-block;
height: 20px;
position: relative;
right: -42px;
background: red;
z-index: 100;
border-radius: 50%;
"></span></div><div style="
display: table-cell;
width: 50%;
border-left: 1px solid blue;
">Front End Developer</div></div><div style="
display: table-row;
"><div style="
display: table-cell;
width: 50%;
border-right: 1px solid blue;
"></div><div style="
display: table-cell;
width: 50%;
border-left: 1px solid blue;
"></div></div></div>
ul li {
display: inline-block;
padding: 5px;
border: 0;
border-right-width: 1px;
border-style: solid;
}
<ul>
<li>
menu1
</li>
<li>
menu2
</li>
<li>
menu3
</li>
</ul>
I'm using the following dropdown:
CSS:
html{
height:100%;
}
body{
height:30%;
position: relative;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
}
#mn-wrapper {
display: block;
width: 100%;
position: absolute;
height: 100%;
}
.mn-sidebar {
margin-left: 100px;
display: block;
position: relative;
vertical-align:top;
padding-bottom: 49px;
background: #272930;
width: 216px;
z-index: 2;
}
#mn-cont {
display:none;
vertical-align: middle;
position: relative;
padding: 1;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
position: absolute;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 0;
margin-top: 0;
height: 55vh;
width: 900px;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 1px solid #1a1c20;
border-bottom: 1px solid #2f323a;
}
.mn-vnavigation li a {
border-top: 1px solid #32353e;
border-bottom: 1px solid #1a1c20;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
height: 55vh;
width: 216px;
background: #272930;
}
.dropdown-submenu:hover >
.dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
.bottom-mn {
bottom:0px;
position:absolute;
width:100%;
}
HTML:
</br><//br></br></br>
<div id="mn-wrapper">
<div class="mn-sidebar">
<div class="mn-toggle"><i class="fa fa-bars"></i></div>
<div class="mn-navblock">
<ul class="mn-vnavigation">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">Client Advice</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Pre-advice</a></li>
<li>Strategy & Technical</li>
<li>Research</li>
<li class="dropdown-submenu active">
APL & Products
<ul class="dropdown-menu parent">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Approved Product List
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 15px; color:white;">Platforms</li>
<li style="padding: 10px 15px; color:white;">Managed Funds</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">Model Portfolios</li>
<li style=" border-bottom: 1px solid #ccc;">Non-approved Products</li>
</ul>
</li>
<li>Implementation</li>
<li>Review</li>
<li>Execution Only</li>
</ul>
</li>
<li>Personal Development</li>
<li>Practice</li>
<li>News</li>
</ul>
</div>
<div class="bottom-mn">
<ul class="mn-vnavigation">
<li>
My Favourite
</li>
<li>
Most Popular
</li>
</ul>
</div>
</div>
<div class="container" id="mn-cont">
<div class="cnt-mcont">
<h1>Title Page</h1>
</div>
</div>
</div>
</div>
JS:
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
http://codepen.io/anon/pen/RWRdWj
Is it possible to get the sub menu (i.e., when you hover over APL & Products, then I want the 3rd level sub-menus to be displayed in front of APL & Products and not on the top). Is it possible to do that?
Try this example
You can solve this adding a custom class .third-menu on your <ul class="dropdown-menu parent third-menu">
and add this rules to new css class:
.third-menu{
position: relative;
top: -50px!important;
}
the first rule will position the submenu relative to APL & Products and the second rule will make it inline with the left menu hovered item, i.e. APL & Products
I wanted to use the following drop down on my webpage:
Html:
<div id="mn-wrapper">
<div class="mn-sidebar">
<div class="mn-toggle"><i class="fa fa-bars"></i></div>
<div class="mn-navblock">
<ul class="mn-vnavigation">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">Client Advice</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Pre-advice</a></li>
<li>Strategy & Technical</li>
<li>Research</li>
<li class="dropdown-submenu active">
APL & Products
<ul class="dropdown-menu parent">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Approved Product List
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 15px; color:white;">Platforms</li>
<li style="padding: 10px 15px; color:white;">Managed Funds</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">Model Portfolios</li>
<li style=" border-bottom: 1px solid #ccc;">Non-approved Products</li>
</ul>
</li>
<li>Implementation</li>
<li>Review</li>
<li>Execution Only</li>
</ul>
</li>
<li>Personal Development</li>
<li>Practice</li>
<li>News</li>
</ul>
</div>
<div class="bottom-mn">
<ul class="mn-vnavigation">
<li>
My Favourite
</li>
<li>
Most Popular
</li>
</ul>
</div>
</div>
<div class="container" id="mn-cont">
<div class="cnt-mcont">
<h1>Title Page</h1>
</div>
</div>
</div>
CSS:
html{
height:100%;
}
body{
height:50%;
position: relative;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
}
#mn-wrapper {
display: table;
width: 100%;
position: absolute;
height: 100%;
}
.mn-sidebar {
display: table-cell;
position: relative;
vertical-align: top;
padding-bottom: 49px;
background: #272930;
width: 216px;
z-index: 2;
}
#mn-cont {
display: table-cell;
vertical-align: top;
position: relative;
padding: 0;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 15px 30px 30px 30px;
margin-top: 0;
height: 101vh;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 1px solid #1a1c20;
border-bottom: 1px solid #2f323a;
}
.mn-vnavigation li a {
border-top: 1px solid #32353e;
border-bottom: 1px solid #1a1c20;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
height: 101vh;
width: 216px;
background: #272930;
}
.dropdown-submenu:hover >
.dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
.bottom-mn {
bottom:0px;
position:absolute;
width:100%;
}
JS:
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
http://codepen.io/MaGiO/pen/YXXzeJ
But, when I hover over any list item and another sub-list opens, then I don't want the black part to extend till the end of the screen, I want that when I hover over a list item then a new list extending only till the last list item should occur. What do I change in this?
Also, when I try to use margin-left in the .mn-sidebar in CSS, then the dropdown shifts to the right, but a bullet symbol appears before the first list item (outside the dropdown menu), why is that happening? I want the dropdown menu to appear a bit on the right.
Comment the height part under .dropdown-submenu >
.dropdown-menu { css
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
/* height: 101vh;*/Comment this out
width: 216px;
background: #272930;
}
And please explain what do you mean by I want the dropdown menu to appear a bit on the right.
See This
Ok try the below code
.mn-vnavigation li a {
margin-left:15px; Add this style
}
give the margin-left according to your requirement
See This
I wanted to use the following drop down on my webpage:
Html:
<div id="mn-wrapper">
<div class="mn-sidebar">
<div class="mn-toggle"><i class="fa fa-bars"></i></div>
<div class="mn-navblock">
<ul class="mn-vnavigation">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">Client Advice</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Pre-advice</a></li>
<li>Strategy & Technical</li>
<li>Research</li>
<li class="dropdown-submenu active">
APL & Products
<ul class="dropdown-menu parent">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Approved Product List
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 15px; color:white;">Platforms</li>
<li style="padding: 10px 15px; color:white;">Managed Funds</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">Model Portfolios</li>
<li style=" border-bottom: 1px solid #ccc;">Non-approved Products</li>
</ul>
</li>
<li>Implementation</li>
<li>Review</li>
<li>Execution Only</li>
</ul>
</li>
<li>Personal Development</li>
<li>Practice</li>
<li>News</li>
</ul>
</div>
<div class="bottom-mn">
<ul class="mn-vnavigation">
<li>
My Favourite
</li>
<li>
Most Popular
</li>
</ul>
</div>
</div>
<div class="container" id="mn-cont">
<div class="cnt-mcont">
<h1>Title Page</h1>
</div>
</div>
</div>
CSS:
html{
height:100%;
}
body{
height:50%;
position: relative;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
}
#mn-wrapper {
display: table;
width: 100%;
position: absolute;
height: 100%;
}
.mn-sidebar {
display: table-cell;
position: relative;
vertical-align: top;
padding-bottom: 49px;
background: #272930;
width: 216px;
z-index: 2;
}
#mn-cont {
display: table-cell;
vertical-align: top;
position: relative;
padding: 0;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 15px 30px 30px 30px;
margin-top: 0;
height: 101vh;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 1px solid #1a1c20;
border-bottom: 1px solid #2f323a;
}
.mn-vnavigation li a {
border-top: 1px solid #32353e;
border-bottom: 1px solid #1a1c20;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
height: 101vh;
width: 216px;
background: #272930;
}
.dropdown-submenu:hover >
.dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
.bottom-mn {
bottom:0px;
position:absolute;
width:100%;
}
JS:
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
http://codepen.io/MaGiO/pen/YXXzeJ
But, when I open this in internet explorer, then the hover dropdowns (the dropdowns that appear on hovering over the arrow signs) don't extend till the end, as a result when I try to move to those sub-menus, they disappear!!
Anyway to fix this? Or make this on-click instead of hover???