I am facing the problem of displaying the ls elements which is in a div > ul with overflow css. This is a vertical list with drop-down list. I am using a 'overflow:scroll' on the vertical list. Now if there is no overflow in the code, it just works fine. But with the overflow, the dropdown menu is not being shown.
Here is the jsfiddle. https://jsfiddle.net/aryasobn/mpb6h831/
Here is the css and html code.
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.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:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu{float:none;}
.dropdown-submenu>.dropdown-menu{left:-100%;margin-right:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
.sidebar{
position: absolute;
top: 0px;
right:0px;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
z-index: 10;
float:right;
margin-right:20px;
height: 700px;
overflow: scroll;
}
.sidebar ul{
z-index:25;
}
#mainist li{
z-index:50;
}
</style>
<div id="floating-panel" class="sidebar">
<ul class="dropdown-menu" style="display: block; position: static;" id="mainlist">
<li class="dropdown-submenu">Set1
<ul class="dropdown-menu" id="usa">
<li>Reebok</li>
<li>Nike</li>
</ul>
</li>
<li class="dropdown-submenu">Set1
<ul class="dropdown-menu" id="canada">
<li>Reebok</li>
<li>Nike</li>
</ul>
</li>
</ul>
</div>
Can some one help me with this.
Here is an image how it is currently looking:
Thanks all.
Apply overflow scroll to inner ul not on .sidebar. Check Snippet. If you want another thing, please tell and I will modify it.
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.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: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #ffffff;
}
.dropdown-submenu {
float: none;
}
.dropdown-submenu>.dropdown-menu {
left: -100%;
margin-right: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.sidebar {
position: absolute;
top: 0px;
right: 0px;
text-align: center;
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
z-index: 10;
float: right;
margin-right: 20px;
height: 700px;
}
.sidebar ul {
z-index: 25;
}
.abc {
width: 150px;
height: 150px;
overflow: scroll;
}
#mainist li {
z-index: 50;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div id="floating-panel" class="sidebar">
<ul class="dropdown-menu" style="display: block; position: static;" id="mainlist">
<li class="dropdown-submenu">Set1
<ul class="dropdown-menu abc" id="usa">
<li>Reebok</li>
<li>Nike</li>
<li>Reebok</li>
<li>Nike</li>
<li>Reebok</li>
<li>Nike</li>
<li>Reebok</li>
<li>Nike</li>
</ul>
</li>
<li class="dropdown-submenu">Set1
<ul class="dropdown-menu abc" id="canada">
<li>Reebok</li>
<li>Nike</li>
</ul>
</li>
</ul>
</div>
</body>
Related
I created a list with divs inside and the one div contains a home icon using font awesome. I want the font icon to change to a picture icon when clicked and change back to the home icon when clicked again. Do I need Javascript for this?
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>
You can use JavaScript, jQuery is recommended:
$('#home a').on('click', function(e){
$('#home span').toggleClass('fa-home fa-anchor');
};
I guess you know how to include jQuery, if not just paste this into your head section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Let me know if that works or not!
You need to add jQuery for that:
$("#home a").click(function(){
$(this).parent().toggleClass("active");
})
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
#home.active .fa-home:before{
content: "\f1b9";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>
You have to use Javascript to bind the click event, after you should toggle CSS class.
Try this solution without jQuery
let home = document.querySelector('#home');
home.addEventListener('click', (e) => {
let icon = document.querySelector('.fa');
icon.classList.toggle('fa-home');
icon.classList.toggle('fa-heart');
})
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>
When user driven events are involved, you'll have to use javascript. One way to do it is, you have two classes and you toggle them to show different icons.
var link = document.querySelector('#home a');
link.addEventListener('click', function(e){
//Prevent default action of a link, which navigates to href prop
e.preventDefault();
var icon = this.querySelector('span');
icon.classList.toggle('fa-home');
icon.classList.toggle('fa-image');
});
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: #fff;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 50px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>
This is a non js solution
input + span:before {
height:45px;
content:"\f015"
}
input:checked + span:before {
content:"\f03e"
}
input{
display:none;
}
span.icon{
display: block;
vertical-align: middle;
text-align:center;
line-height: 45px;
}
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
cursor:pointer;
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<label class="switch">
<div id="homecover">
<li id="home">
<input type="checkbox" ><span class="icon fa fa-lg"></span>
<li>
</div>
</label>
</ul>
$("span.fa").click(function(){
if($(this).attr("class") === "fa fa-home"){
$(this).attr("class", "fa-fa-{any-pic}");
} else {
$(this).attr("class", "fa fa-home");
}
});
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???
I am trying to put a submenu inside "The best movies by genre" but it's now working
http://www.bootply.com/y1aWXXwQDR
How can I put the links (action, thriller, comedy..) as a submenu?
Using Bootstrap 3, this is a little tricky. I found this resource which provides a good example by including a chunk of extra CSS:
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.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;
}
The HTML to use this code is pretty intuitive:
<li class="dropdown-submenu">
Even More..
<ul class="dropdown-menu">
<li>3rd level</li>
<li>3rd level</li>
</ul>
</li>
Here it is as a JsFiddle for forking and re-use: http://jsfiddle.net/zephod/9vkbgp74/1/
Is something like this what you're looking for?
$(function() {
$('#byGenre').popover({
content: $('#genres').html(),
trigger: 'click',
html: true,
});
});