Once the menu is clicked it opens but then the other all can open too plus they all can be opened on hover. I have tried several combination of target eg. ul's li's but something i still wrong.
I have posted a fiddle below to but for some reason it doesn’t even work there at all.
i have a single menu working with this code not sure why it brakes down with this. to many levels in the ul li ul configuration? do I need to target a new id?
css
.dropmenu,
.dropmenu ul,
.dropmenu li,
.dropmenu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.dropmenu {
height: 20px;
width: 500px ;
}
.dropmenu li {
position: relative;
list-style: none;
float: left;
display: block;
z-index: 9999;
}
.dropmenu li a {
display: block;
padding: 0 14px;
height: 26px;
line-height: 25px;
text-decoration: none;
font-family: Verdana, Arial;
font-size: 13px;
color: #CCCCCC;
border-left: 1px solid #555555;
border-right: 1px solid #666666;
}
.dropmenu ul li:hover > a { color: #ff4200; }
.dropmenu li ul {
position: absolute;
top: 26px;
left: 0;
opacity: 0;
background: #222222;
-webkit-transition: opacity 0.2s ease-in-out 0.2s;
-moz-transition: opacity 0.2s ease-in-out 0.2s;
-o-transition: opacity 0.2s ease-in-out 0.2;
-ms-transition: opacity 0.2s ease-in-out 0.2s;
transition: opacity 0.2s ease-in-out 0.2s;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
display:none;
}
.dropmenu li:hover > ul { opacity: 1; }
.dropmenu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .3s ease .1s;
-moz-transition: height .3s ease .1s;
-o-transition: height .3s ease .1s;
-ms-transition: height .3s ease .1s;
transition: height .3s ease .1s;
}
.dropmenu li:hover > ul li {
height: 27px;
line-height: 27px;
overflow: visible;
padding: 0;
}
.dropmenu ul li a {
width: 120px;
padding: 0px 0px 0px 40px;
margin: 0;
border: none;
border: 1px solid #666666;
}
.dropmenu ul li:hover a {
background: #ffffff;
}
.dropmenu li:hover a {
background: #222222;
}
.dropmenu ul li:last-child a { border-radius: 0 0 5px 5px;}
.dropmenu a.mail { background: url(../images/arrow2small.gif) no-repeat 6px center; }
.dropmenu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.dropmenu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }
html
<div class="menubar">
<div class="menubarleft">
<!-- Start Menu -->
<ul class="dropmenu" id="dropmenu">
<!-- Home -->
<li>Home
</li>
<!-- CPHome Close -->
<!-- Business Open -->
<li>Electrical
<ul>
<li>Control Panel</li>
<li>New Business</li>
<li>Enhance</li>
<li>Advertising</li>
<li>Media</li>
</ul>
</li>
<!-- 2nd Close -->
<!-- 3rd Open -->
<li><a href="#" class="dropsmall2" >Plumbing</a>
<ul>
<li>Control Panel</li>
<li>Manage domains</li>
<li>Domain wizard</li>
<li>Order domain</li>
<li>Manage hosting</li>
</ul>
</li>
<!-- 3rd Close -->
<!-- 4th Open -->
<li>Air & Water
<ul>
<li>Inbox</li>
<li>New Email </li>
<li>Quick message</li>
<li>Settings</li>
</ul>
</li>
<!-- 4th Close -->
<!-- 5th Open -->
<li>Natural Homes
<ul>
<li>Hobbiest</li>
<li>Startup </li>
<li>Companies</li>
<li>Entreupenuer</li>
</ul>
</li>
<!-- 5th close -->
</ul>
js
$('a.dropsmall2').click(function() {
$('#dropmenu ul').show('medium');
e.preventDefault();
return false;
});
$('#dropmenu a').click(function() {
$(this).parents('ul').not('#dropmenu').hide('slow');
e.preventDefault();
return false;
});
$('#dropmenu ul').mouseleave(function() {
$(this).hide('slow');
return false;
});
https://jsfiddle.net/e9e17adm/1 - doesn’t work at all in the fiddle for some reason getting confused now
http://jsfiddle.net/e9e17adm/6/
Only change (other than including jQuery) was to make it
$(this).next('ul').show('medium');
instead of
$('#dropmenu ul').show('medium');
so that it only does the ul that they clicked on, not all ul elements in the #dropmenu
Related
Background
So I have developed a top menu through basic HTML and CSS. This is saved as Top_Menu.html which works fine.
Top_Menu.html:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #EBE8E4;
color: #222;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 15px;
}
nav {
background-color: #fff;
border: 1px solid #dedede;
border-radius: 4px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
color: #888;
display: block;
margin: 8px 22px 8px 22px;
overflow: hidden;
width: 610px;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
list-style-type: none;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
nav > ul > li > a > .caret {
border-top: 4px solid #aaa;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
display: inline-block;
height: 0;
width: 0;
vertical-align: middle;
-webkit-transition: color 0.1s linear;
-moz-transition: color 0.1s linear;
-o-transition: color 0.1s linear;
transition: color 0.1s linear;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 56px;
padding: 0 24px;
text-decoration: none;
}
nav > ul > li:hover {
background-color: rgb( 40, 44, 47 );
}
nav > ul > li:hover > a {
color: rgb( 255, 255, 255 );
}
nav > ul > li:hover > a > .caret {
border-top-color: rgb( 255, 255, 255 );
}
nav > ul > li > div {
background-color: rgb( 40, 44, 47 );
border-top: 0;
border-radius: 0 0 4px 4px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
display: none;
margin: 0;
opacity: 0;
position: absolute;
width: 165px;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
nav > ul > li:hover > div {
display: block;
opacity: 1;
visibility: visible;
}
nav > ul > li > div ul > li {
display: block;
}
nav > ul > li > div ul > li > a {
color: #fff;
display: block;
padding: 12px 24px;
text-decoration: none;
}
nav > ul > li > div ul > li:hover > a {
background-color: rgba( 255, 255, 255, 0.1);
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Calendar</li>
<li>
Lists<span class="caret"></span>
<div>
<ul>
<li>Grocery List</li>
<li>Tasks</li>
<li>Current Meals</li>
</ul>
</div>
</li>
<li>Media</li>
<li>
Cooking<span class="caret"></span>
<div>
<ul>
<li>Meat Temperatures</li>
<li>Smoker</li>
</ul>
</div>
</li>
<li>Hubitat</li>
</ul>
I am attempting to reuse this menu across multiple pages so I have put the following in my head:
<Head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</Head>
and then call up the top menu with the following:
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function(){
$("#nav-placeholder").load("Top_Menu.html");
});
</script>
<!--end of Navigation bar-->
The rest of the page is pretty straight forward. Directly below the menu I place an embedded google calendar with the following:
<iframe src="Link to google calendar" style="position:absolute;top:80px;left:5px;border-width:0" width="600" height="800" frameborder="0" scrolling="no"></iframe>
Problem
The problem is that my top menu's drop down is always behind my google calendar:
Loading just the menu, it is supposed to look like:
What I have tried
So I do know the elements can have their Z-index defined so I tried to define the google calendar to a high one (z-index:10):
<iframe src="Link to google calendar" style="position:absolute;z-index:10;top:80px;left:5px;border-width:0" width="600" height="800" frameborder="0" scrolling="no"></iframe>
and placing my top menu to a low z-index (z-index:1):
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function(){
$("#nav-placeholder").load("Top_Menu.html");
$("#nav-placeholder").style.zIndex = "1";
});
</script>
<!--end of Navigation bar-->
but unfortunately this does not help. Am I missing something for how to make my menu always be on top?
You have to make your menu z-index higher than iframe, try it and let me know
iamousseni got me down the right track that the higher the Z-order, the more on top it will be. I was thinking of it backwards. The solution is that where I created my Top_Menu.html I have to assign the z-index to the elements as they appear (the drop down effect)
Within this section:
nav > ul > li > div {
background-color: rgb( 40, 44, 47 );
border-top: 0;
border-radius: 0 0 4px 4px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
display: none;
margin: 0;
opacity: 0;
position: absolute;
width: 165px;
visibility: hidden;
z-index: 100;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
I put z-index:100; as in my case I will never exceed 100.
You can solve this by setting the z-index of the dropdown menu within your li tag as
nav>ul>li>div {
z-index:1;
}
Demo at https://jsfiddle.net/saksham_malhotra/nv5preyw/
Am a bit new to jQuery so please bear with me. I have this navbar menu that drops down on hover. Everything is working perfectly but my plan is to change the hover dropdown into a click and also hide the dropdowns when the outside html is clicked. I am not using any framework.
<ul class="tc-navigation">
<li class="active">
HOME
</li>
<li>
<a id="er">SERVICES</a>
<ul>
<li class="round"><a id="err">Transportation<i class="fa fa-angle-right"></i></a>
<ul>
<li class="round">Bus</li>
<li class="round">Taxi</li>
<li class="round">Air</li>
</ul>
</li>
<li class="round">Car Rental Agencies</li>
<li class="round">Driving Licence</li>
</ul>
</li>
<li>
<a id="er">ABOUT US</a>
<ul>
<li class="round">Who We are</li>
<li class="round">Our Vision</li>
<li class="round">Photo Gallery</li>
</ul>
</li>
<li class="round">CONTACT</li>
</ul>
CSS
.tc-navigation li>ul {
list-style: none;
margin: 0;
padding: 0;
top: 120%;
border-top: 2px solid;
border-radius: 0;
position: absolute;
width: 190px;
visibility: hidden;
opacity: 0;
background: #fff;
z-index: 10;
}
.tc-navigation li ul li {
float: none;
border-bottom: 1px solid #e1e1e1;
}
.tc-navigation li ul li:last-child {
border: 0;
}
.tc-navigation li ul li a {
width: 100%;
color: #444;
padding: 15px;
text-transform: capitalize;
text-align: center;
}
.tc-navigation li:hover>ul {
visibility: visible;
opacity: 1;
top: 100%;
}
.tc-navigation li ul li a:hover {
color: #fff;
}
.tc-navigation li ul li a:hover i {
color: #fff;
}
.tc-navigation li ul li a i {
color: #666;
position: absolute;
right: 10px;
top: 50%;
margin: -7px 0 0;
}
/* Sub Menu */
.tc-navigation li>ul li ul {
left: 110%;
top: 0!important;
}
.tc-navigation li ul li:hover>ul {
visibility: visible;
opacity: 1;
left: 100%;
}
You're currently using the :hover state in the CSS to set different rules for certain DOM elements. CSS doesn't directly respond to click events (except for the :active state for links and buttons, which doesn't really help you here); so the easiest way to convert that to click events would be to have those click events toggle a CSS class on the element, which can then be used in the CSS exactly the same way you're currently using :hover.
$('.tc-navigation > li').on("click", function(e) {
$(this).toggleClass('showSubmenu');
$(this).siblings().removeClass('showSubmenu'); // prevent two submenus from being "open" at the same time
return false; // keep the event from bubbling
});
// Hide menus when clicking outside them. Might be preferable
// to set this only when a submenu is opened, but for now
// I'mm just brute-forcing it on the entire page:
$(document).on('click', function(){
$('.tc-navigation > li').removeClass('showSubmenu')
});
#container {position:relative}
body {background-color:#CCC}
.tc-navigation li>ul {
list-style: none;
margin: 0;
padding: 0;
top: 120%;
border-top: 2px solid;
border-radius: 0;
position: absolute;
width: 190px;
visibility: hidden;
opacity: 0;
background: #fff;
z-index: 10;
}
.tc-navigation li ul li {
float: none;
border-bottom: 1px solid #e1e1e1;
}
.tc-navigation li ul li:last-child {
border: 0;
}
.tc-navigation li ul li a {
width: 100%;
color: #444;
padding: 15px;
text-transform: capitalize;
text-align: center;
}
/* Changing this selector from li:hover to li.showSubmenu; the rest of the CSS is as in the original: */
.tc-navigation li.showSubmenu>ul{
visibility: visible;
opacity: 1;
top: 100%;
}
.tc-navigation li ul li a:hover {
color: #fff;
}
.tc-navigation li ul li a:hover i {
color: #fff;
}
.tc-navigation li ul li a i {
color: #666;
position: absolute;
right: 10px;
top: 50%;
margin: -7px 0 0;
}
/* Sub Menu */
.tc-navigation li>ul li ul {
left: 110%;
top: 0!important;
}
.tc-navigation li ul li:hover>ul {
visibility: visible;
opacity: 1;
left: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul class="tc-navigation">
<li class="active">
HOME
</li>
<li>
<a id="er">SERVICES</a>
<ul>
<li class="round"><a id="err">Transportation<i class="fa fa-angle-right"></i></a>
<ul>
<li class="round">Bus</li>
<li class="round">Taxi</li>
<li class="round">Air</li>
</ul>
</li>
<li class="round">Car Rental Agencies</li>
<li class="round">Driving License</li>
</ul>
</li>
<li>
<a id="er">ABOUT US</a>
<ul>
<li class="round">Who We are</li>
<li class="round">Our Vision</li>
<li class="round">Photo Gallery</li>
</ul>
</li>
<li class="round">CONTACT</li>
</ul>
</div>
(I had to add a container element to keep the submenus from falling offscreen; the positioning is still not quite right, I assume because your CSS depends on other page elements not shown here, but it's close enough to demonstrate the idea. Other than that the only change to your CSS was the one line where li:hover was changed to li.showSubmenu.)
Alright, Take a look on my menu
$('#cssmenu li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp(200);
} else {
element.addClass('open');
element.children('ul').slideDown(200);
element.siblings('li').children('ul').slideUp(200);
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp(200);
}
});
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu {
width: 220px;
font-family: Raleway, sans-serif;
color: #ffffff;
}
#cssmenu ul ul {
display: none;
}
#cssmenu > ul > li.active > ul {
display: block;
}
.align-right {
float: right;
}
#cssmenu > ul > li > a {
padding: 16px 22px;
cursor: pointer;
z-index: 2;
font-size: 16px;
text-decoration: none;
color: #ffffff;
background: #bb0e0e;
-webkit-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu > ul > li > a:hover {
color: #d8f3f0;
}
#cssmenu ul > li.has-sub > a:after {
position: absolute;
right: 26px;
top: 19px;
z-index: 5;
display: block;
height: 10px;
width: 2px;
background: #ffffff;
content: "";
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub > a:before {
position: absolute;
right: 22px;
top: 23px;
display: block;
width: 10px;
height: 2px;
background: #ffffff;
content: "";
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub.open > a:after,
#cssmenu ul > li.has-sub.open > a:before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu ul ul li a {
padding: 14px 22px;
cursor: pointer;
z-index: 2;
font-size: 14px;
text-decoration: none;
color: #ddd;
background: #49505a;
-webkit-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu ul ul ul li a {
padding-left: 32px;
}
#cssmenu ul ul li a:hover {
color: #fff;
}
#cssmenu ul ul > li.has-sub > a:after {
top: 16px;
right: 26px;
background: #ddd;
}
#cssmenu ul ul > li.has-sub > a:before {
top: 20px;
background: #ddd;
}
<html lang="ru" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div id="cssmenu">
<ul>
<li><i class="fa fa-fw fa-home"></i> Home</li>
<li class="has-sub"><i class="fa fa-fw fa-bars"></i> Services
<ul>
<li class="has-sub">Transportation
<ul>
<li>Bus</li>
<li>Taxi</li>
<li>Air</li>
</ul>
</li>
<li>Car Rental Agencies</li>
<li>Driving Licence</li>
</ul>
</li>
<li class="has-sub"><i class="fa fa-fw fa-cog"></i> Abut us
<ul>
<li>Who We are</li>
<li>Our Vision</li>
<li>Photo Gallery</li>
</ul>
</li>
<li><i class="fa fa-fw fa-phone"></i> Contact</li>
</ul>
</div>
</body>
</html>
accordian menu , has to make the submenu to stay selected after clicking by js. or css .
not the static solution in html.
need solution comprising jquery and the css
it should appear same as hovering after clicked
check out the fiddle
https://jsfiddle.net/shaswatatripathy/ucgff65k/
$(document).ready(function() {
$("#accordion > li > div").click(function() {
$("#submenu li").slideUp();
if (!$(this).next().is(":visible")) {
$(this).next().slideDown();
}
});
});
.accordion {
width: 100%;
max-width: 260px;
background: #FFF;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.accordion .link {
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px;
font-size: 14px;
font-weight: 700;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-right: 1px solid #CCC;
position: relative;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
/*-------------Submenu-----------------------------*/
.submenu {
padding: 0px;
display: none;
font-size: 14px;
}
.submenu li {
border-bottom: 1px solid #4b4a5e;
}
.submenu a {
display: block;
text-decoration: none;
color: #23222d;
background-color: #CCC;
padding: 12px;
padding-left: 42px;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
#submenu li.active {
display: block;
}
.submenu a:hover {
background: #b63b4d;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="accordion" class="accordion">
<li>
<div class="link">Menu 2</div>
<ul class="submenu">
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
</ul>
</li>
<li>
<div class="link">Menu 3</div>
<ul class="submenu">
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
</ul>
</li>
</ul>
Hope this is what you're looking for,
$(document).ready(function() {
$("#accordion > li > div").click(function() {
$("#submenu li").slideUp();
if (!$(this).next().is(":visible")) {
$(this).next().slideDown();
}
});
$(".submenu li a").click(function(){
$(".submenu li a.active").removeClass("active");
$(this).addClass("active");
});
});
.accordion {
width: 100%;
max-width: 260px;
background: #FFF;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.accordion .link {
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px;
font-size: 14px;
font-weight: 700;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-right: 1px solid #CCC;
position: relative;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
/*-------------Submenu-----------------------------*/
.submenu {
padding: 0px;
display: none;
font-size: 14px;
}
.submenu li {
border-bottom: 1px solid #4b4a5e;
}
.submenu a {
display: block;
text-decoration: none;
color: #23222d;
background-color: #CCC;
padding: 12px;
padding-left: 42px;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
#submenu li.active {
display: block;
}
.submenu a:hover {
background: #b63b4d;
color: #FFF;
}
.submenu li a.active {
background: #b63b4d;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="accordion" class="accordion">
<li>
<div class="link">Menu 2</div>
<ul class="submenu">
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
</ul>
</li>
<li>
<div class="link">Menu 3</div>
<ul class="submenu">
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
</ul>
</li>
</ul>
Create an .active class for the <a> tag inside <li> which matches the CSS of the :hover state of <a>, like this:
a.active {
background: #b63b4d;
color: #FFF;
}
And then just use the click event listener to add and remove this class when clicked on the submenu:
$(document).ready(function() {
$("#accordion > li > div").click(function() {
if (!$(this).next().is(":visible")) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});
$(".submenu a").click(function() {
$(this).toggleClass("active").parent().siblings().find("a").removeClass("active");
});
});
I also modified to jQuery so that the accordion closes when it is clicked on in the open state.
Here's the working jsfiddle: https://jsfiddle.net/ucgff65k/2/
And the code snippet:
$(document).ready(function() {
$("#accordion > li > div").click(function() {
if (!$(this).next().is(":visible")) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});
$(".submenu a").click(function() {
$(this).toggleClass("active").parent().siblings().find("a").removeClass("active");
});
});
.accordion {
width: 100%;
max-width: 260px;
background: #FFF;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.accordion .link {
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px;
font-size: 14px;
font-weight: 700;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-right: 1px solid #CCC;
position: relative;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
/*-------------Submenu-----------------------------*/
.submenu {
padding: 0px;
display: none;
font-size: 14px;
}
.submenu li {
border-bottom: 1px solid #4b4a5e;
}
.submenu a {
display: block;
text-decoration: none;
color: #23222d;
background-color: #CCC;
padding: 12px;
padding-left: 42px;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.submenu a:hover {
background: #b63b4d;
color: #FFF;
}
a.active {
background: #b63b4d;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="accordion" class="accordion">
<li>
<div class="link">Menu 2</div>
<ul class="submenu">
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
</ul>
</li>
<li>
<div class="link">Menu 3</div>
<ul class="submenu">
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
</ul>
</li>
</ul>
I've spent all night attempting to create this. I finally got it to where it will display a flyout, but all of the dimensions are wrong, and I'm obviously not understanding the hierarchy of css here. My end goal is for it to look like this. (Vertical, color scheme, pretty icons) What I want it to look like. But I want it to act like this.
HTML:
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="js/menu.js"></script><script type="text/javascript">$(document).ready(function(){$(".menu").menu({speed: 400,type: "vertical",});});</script>
<body>
<div class="content">
<ul class="menu">
<li class="active"><a href="JavaScript:void(0)"><i class="icon-dashboard">
</i>Dashboard</a></li>
<li><i class="icon-servers"></i>Servers
<ul>
<li>View Virtual Servers</li>
<li>Add Virtual Servers</li>
</ul>
</li>
<li><i class"icon-user"></i>Users</li>
</ul>
</div>
</body>
CSS:
#import "./font-awesome.css";
#import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro');
.menu {
position: relative;
float: left;
height: 100%;
top: 0;
left: 0;
z-index: 10;
margin: 0;
padding: 0;
font-family: "Source Sans Pro", Segoe UI, Arial;
list-style: none;
background: #303641;
box-shadow: 2px 0 18px rgba(0, 0, 0, 0.26);
}
.menu li {
display: inline;
position: relative
float: left;
height: 2.5em;
line-height: 2.5em;
width: 4em;
margin: 0;
padding: 0;
font-size: 12px;
}
.menu>li>a {
display: block;
padding: 20px 22px;
color: #aaabae;
text-align: center;
text-decoration: none;
text-transform: uppercase;
text-indent: -500em;
border-bottom: 1px solid rgba(170, 171, 174, 0.15);
-webkit-transition: color .2s linear, background .2s linear;
-moz-transition: color .2s linear, background .2s linear;
-o-transition: color .2s linear, background .2s linear;
transition: color .2s linear, background .2s linear
}
.menu li:hover>a, .menu li.active a {
background: #2b303a;
color: #fff
}
.menu li.right {
float: right
}
.menu ul, .menu ul li ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
z-index: 99999;
width: 4em;
background: #303641;
box-shadow: 0 1px 1px rgba(0,0,0,0.3)
}
.menu ul {
top: 60px;
left: 0
}
.menu ul li ul {
top: 0;
left: 100%
}
.menu ul li {
clear: both;
width: 4em;
border: 0;
font-size: 12px
}
.menu ul li a {
padding: 10px 20px;
width: 4em;
color: #dedede;
font-size: 13px;
text-decoration: none;
display: inline-block;
float: left;
clear: both;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-transition: color .2s linear, background .2s linear;
-moz-transition: color .2s linear, background .2s linear;
-o-transition: color .2s linear, background .2s linear;
transition: color .2s linear, background .2s linear
}
menu>li.showhide {
display: none;
width: 4em;
height: 2.5em;
cursor: pointer;
color: #dedede;
border-bottom: solid 1px rgba(0,0,0,0.1);
background: #303641;
}
menu>li.showhide span.title {
margin: 16px 0 0 25px;
float: left
}
.menu>li.showhide span.icon {
margin: 17px 20px;
float: right
}
.menu>li.showhide .icon em {
margin-bottom: 3px;
display: block;
width: 20px;
height: 2px;
background: #ccc
}
.menu.vertical {
width: 4em;
}
.menu.vertical li {
width: 4em;
}
.menu.vertical li a {
display: inline-block!important;
width: 4em;
padding: 18px 20px 16px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box
}
.menu.vertical ul li {
width: 4em;
}
.menu.vertical ul, .menu.vertical ul li ul {
width: 4em;
}
.menu.vertical ul {
top: 0;
left: 100%
}
.menu.vertical ul li ul {
top: 1px
}
JavaScript:
$.fn.menu=function(e){function r(){$(".menu").find("li").unbind();$(".menu").find("ul").hide(0);if(window.innerWidth<=768){o();s();if(n==true){a();n=false}}else{u();i();if(t.type=="horizontal"&&t.align=="right"&&n==false){a();n=true}}}function i(){$(".menu li").bind("mouseover",function(){$(this).children("ul").stop(true,true).fadeIn(t.speed)}).bind("mouseleave",function(){$(this).children("ul").stop(true,true).fadeOut(t.speed)})}function s(){$(".menu > li").bind("click",function(){if($(this).children("ul").css("display")=="none"){$(this).find("ul").slideDown(t.interval)}else{$(this).children("ul").slideUp(t.interval)}})}function o(){$(".menu > li:not(.showhide)").hide(0);$("-menu > li.showhide").show(0);$(".menu > li.showhide").bind("click",function(){if($(".menu > li").is(":hidden")){$(".menu > li").slideDown(300)}else{$(".menu > li:not(.showhide)").slideUp(300);$(".menu > li.showhide").show(0)}})}function u(){$(".menu > li").show(0);$(".menu > li.showhide").hide(0)}function a(){$(".menu > li").addClass("right");var e=$(".menu").width();var t=$(".menu").children("li");var n=0;$(".menu").children("li:not(.showhide)").detach();for(var r=t.length;r>=1;r--){$(".menu").append(t[r])}}var t={speed:300,type:"horizontal",align:"left"};$.extend(t,e);var n=false;if(t.type=="vertical"){$(".menu").addClass("vertical");if(t.align=="right"){$(".menu").addClass("right")}}$(".menu").prepend("<li class='showhide'><span class='title'>MENU</span><span class='icon'><em></em><em></em><em></em><em></em></span></li>");r();$(window).resize(function(){r()})}
Thank you in advance for any help you provide! I appreciate anything :)
A few things need to be reset.
Remove overflow: hidden from the ul.menu. Otherwise your flyouts will be... hidden. :)
Set the .menu>li to position: relative and then the sub uls to position: absolute offsetting however you need to.
Make sure you're targeting specific <a> elements with your initial css by using child selectors instead of decendant selectors. That is, use .menu > li > a vs .menu li a. The former will only target as that are children of the lis that are children of .menu. The latter will target all as that are descendant of all lis that are descendants of .menu which will include your flyout's <a>s.
This fiddle should get your started.
I'm trying to do a expandable menu in jQuery and CSS3, here is the fiddle:
http://jsfiddle.net/mNcuQ/3/
When you click the slidebar, the titles section is showed. But I'm afraid it doesn't look properly. What I'm trying to do is when the .expanded class is active and the width of the slidebar is modified ( with the transition finished ) then show the titles of the menu with fade in effect. As I do now, the titles of the menu are not respeting the display: inline-block. Surely I'm missing something...
Do you have any idea or tip to do it? What is better to use in this case: CSS3 transition or jQuery animation?
Here is the code of the fiddle:
HTML
<div id="sidebar">
<a class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<nav id="nav" class="navigation" role="navigation">
<ul class="unstyled">
<li class="active" data-section="1"><i class="icon-home"></i> <span>Home</span>
</li>
<li data-section="2" class=""><i class="icon-rocket"></i> <span>Services</span>
</li>
<li data-section="3" class=""><i class="icon-laptop"></i> <span>Projects</span>
</li>
<li data-section="6" class=""><i class="icon-money"></i> <span>Price</span>
</li>
<li data-section="4" class=""><i class="icon-pencil"></i> <span>Team</span>
</li>
<li data-section="5" class="last"><i class="icon-envelope"></i> <span>Contact</span>
</li>
</ul>
</nav>
</div>
JS
$(document).ready(function ($) {
$('#sidebar').click(function () {
$('html').toggleClass('expanded');
});
});
CSS
#sidebar {
background-color: #151515;
height: 120%;
padding: 0;
position: fixed;
left: 0;
top: 0;
width: 50px;
z-index: 2;
cursor:pointer;
overflow-y: hidden;
}
#nav {
margin-top: 80px;
}
#nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav ul li i {
font-size : 15px;
}
#nav ul li {
color: #F1F1F1;
cursor: pointer;
display: inline-block;
line-height: 22px;
filter: alpha(opacity=40);
font-size: 16px;
font-size: 1.6rem;
font-style: normal;
font-weight: 100;
opacity: .4;
padding: 8px 0 8px 15px;
text-transform: uppercase;
width: 70%;
}
#sidebar {
-webkit-transition: width 500ms ease;
-moz-transition: width 500ms ease;
-ms-transition: width 500ms ease;
-o-transition: width 500ms ease;
transition: width 500ms ease;
}
#nav ul li.active {
filter: alpha(opacity=100);
opacity: 1;
}
#nav ul li.last {
padding-right: 0px;
}
#nav li span {
display: inline-block;
font-size: 14px;
font-size: 1.4rem;
height: 0;
opacity: 0;
overflow: hidden;
padding-left: 10px;
width: 0;
}
.btn-navbar {
cursor: pointer;
filter: alpha(opacity=40);
float: left;
margin: 20px 5px 10px;
opacity: .4;
padding: 7px 10px;
}
.btn-navbar .icon-bar {
background-color: #F5F5F5;
border-radius: 1px 1px 1px 1px;
box-shadow: none;
display: block;
height: 2px;
width: 18px;
}
/* Expanded Nav Styling */
.expanded #container {
left: 100px;
transform: translate3d(50px, 0px, 0px) scale3d(1, 1, 1);
}
.expanded #sidebar {
width: 150px;
}
.expanded #nav li {
width: 90%;
}
.expanded #nav li span {
display: inline-block;
height: auto;
opacity: 1;
overflow: visible;
width: auto;
}
If you need more info, let me know and I'll edit the post.
use transition-delay maybe?
Fiddle (moved revelant css classes to bottom)
#nav li span {
display: inline-block;
font-size: 14px;
font-size: 1.4rem;
height: 0;
opacity: 0;
overflow: hidden;
padding-left: 10px;
width: 0;
transition:opacity 0.5s ease; // ease opacity
}
.expanded #nav li span {
display: inline-block;
height: auto;
opacity: 1;
overflow: visible;
width: auto;
transition-delay: 500ms; //delay transition by the same amount of sidebar width transition time
}
the problem is that you expanded container is too small to position the headlines correct, make it a bit larger and it will work
.expanded #sidebar {
width: 180px;
}