I am fresh to HTML & CSS. I have started customizing a Bootstrap template and would like to add a logo next to the icon bar, but this navbar seems way more trickier than the basic Bootstrap navbar that I've played around with. I would really appreciate it if someone could help me out by pointing me where to look in the code, or by providing one or two examples. Here is the link to the template I am customizing. I would like to place an image right next to the toggle button like this one does with "Menu".
HTML:
<nav id="navigation" class="navbar scrollspy">
<!-- .container -->
<div class="container">
<div class="navbar-brand">
<img src="images/logo.png" alt="Logo" /> <!-- site logo -->
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Features</li>
<li>Portfolios</li>
<li>Why Us?</li>
<li>Page</li>
<li class="menu-btn">Contact</li>
</ul>
</div>
<!-- .container end -->
</nav>
CSS:
/* Navigation Mobile */
#navigation_mobile {
display:none;
font-size:14px;
line-height:18px;
text-align:center;
font-weight:600;
text-transform:uppercase;
}
#navigation_mobile .nav-menu-links {
display:none;
background-color:#2a2a2a;
}
#navigation_mobile ul {
padding:30px 100px;
margin:0px;
}
#navigation_mobile ul li {
list-style-type:none;
padding:11px 0px;
}
#navigation_mobile ul li a {
display:block;
color:#a9a9a9;
}
#navigation_mobile ul li a:hover { color:#FFF; }
#navigation_mobile .nav-menu-button {
background-color:#202020;
padding:15px 0px 14px;
}
#navigation_mobile .nav-menu-button button.nav-menu-toggle {
color:#a9a9a9 !important;
font-size:24px;
line-height:1;
background:none;
padding:0px;
border:0px;
border-radius:0px;
-webkit-transition:color .2s ease;
transition:color .2s ease;
}
#navigation_mobile .nav-menu-button button.nav-menu-toggle:hover { color:#FFF !important; }
#header .navbar { display:none;}
#navigation_mobile { display:block; }
You could simply add the text to the image. And define the text in the image by:
<img src="logo.png" alt="My Logo">
Related
I am trying to make my content inside the tab slide up when you chose the tab. So when you click on a tab the text inside that tab will slide up from the bottom.
$(document).ready(function() {
var selectedtab;
$('ul.tabs li').click(function() {
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
if (selectedtab) $("#" + selectedtab).hide();
$("#" + tab_id).slideUp("slow", function() {
// Animation complete.
});
selectedtab = tab_id;
$(this).addClass('current');
})
})
.container {
display: flex;
}
.purpleBackground {
align-self: flex-end;
background-color: #65308b;
opacity: 0.9;
width: 60%;
height: 80%;
bottom: 0px !important;
padding: 60px 40px;
border: 1px solid #fff;
}
.whiteText {
color: #fff;
}
ul.tabs {
margin: 0px;
padding: 0px;
}
ul.tabs li {
background: none;
color: #222;
display: block;
padding: 20px 15px;
cursor: pointer;
font-size: 17px;
border-width: 0px 0px 1px 0px;
}
ul.tabs li.current {
background: #65308b;
color: #fff;
}
.tab-content {
display: none;
color: #fff;
}
.tab-content.current {
display: inherit;
}
.sectionBackground {
background: url("http://www.choicecare.ds-
demo.co.uk/wp-content/uploads/2017/12/placeholder.png");
background-size:cover;
display: flex;
/** I have just put a height value, but when you come to use match height
See Line 14 in the .JS**/
height: 450px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-4 ">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">General Care</li>
<li class="tab-link" data-tab="tab-2">Dementia Care</li>
<li class="tab-link" data-tab="tab-3">End of Life (EOLC)</li>
<li class="tab-link" data-tab="tab-4">Hospital Discharge</li>
<li class="tab-link" data-tab="tab-5">Review and Monitoring</li>
<li class="tab-link" data-tab="tab-6">Holiday Cover</li>
<li class="tab-link" data-tab="tab-7">Advanced Care Planning (ACP)
</li>
</ul>
</div>
<div class="col-md-8">
<div class="sectionBackground">
<div class="purpleBackground">
<div id="tab-1" class="tab-content current">Test</div>
<div id="tab-2" class="tab-content">Test</div>
<div id="tab-3" class="tab-content">Test</div>
</div>
</div>
</div>
</div><!-- container -->
What would I do in the JS to make this work? The correct code and an explanation would be greatly appreciated!
That's a great question lian geary. In maximum time we need to use tab systems. You can make those tab animations fading or sliding. Now I'm going to show you the code that how to make a tab system in HTML5, CSS2 and jQuery ( Mostly JavaScript)...
The HTML5 code...
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Webcoachbd Tab System tutorials</title>
<link rel="stylesheet" href="../tabSystem/style.css"
type="text/css" />
<script src="../jquery_latest.js" type="text/javascript"></script>
<script src="../tabSystem/script.js" type="text/javascript"></script>
</head>
<body>
<div id="tab_system"><!-- start of tab_system-->
<ul id="tab_bar">
<li>
Current Hits
</li>
<li>
Our Favourites
</li>
<li>
All Time
</li>
</ul>
<ul id="current" class="tab_list">
<li>
Who behind behind this | About us
</li>
<li>
HTML tutorials
</li>
<li>
Jquery Tutorials
</li>
<li>
Contact us if need
</li>
</ul>
<ul id="favorite" class="tab_list">
<li>
</li>
<li>
this is our favorite post
</li>
<li>
Short Sale Info
</li>
<li>
Testimonials
</li>
<li>
Contact
</li>
</ul>
<ul id="all_time" class="tab_list">
<li>
Mortgage Forgiveness Debt Relief Act
</li>
<li>
5 Reasons to Hire Us
</li>
<li>
this is our favorite post
</li>
<li>
this is our fav post 2
</li>
</ul>
</div><!-- end of tab_system-->
</body>
</html>
The CSS2 code...
body{
font-family:Verdana;
font-size:13px;
}
ul{
padding:0;
margin:5px 0 0 0;
}
#tab_system{
width:400px;
margin:0 auto;
overflow:hidden;
border:1px solid #ccc;
border-radius:5px;
padding:10px;
}
#tab_bar{
float:left;
}
#tab_bar li .running{
background:#fff;
border-top:1px solid #ccc;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
color:#000;
}
#tab_bar li{
list-style:none;
float:left;
}
#tab_bar li a{
padding:5px;
text-decoration:none;
background:#333;
border:#111;
color:#fff;
}
#tab_bar li a:nth-child(1),#tab_bar li a:nth-child(2){
margin-right:2px;
}
#tab_system .tab_list li{
list-style:none;
}
#tab_system .tab_list{
float:left;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
min-width:260px;
}
#tab_system .tab_list li a{
padding:5px;
text-decoration:none;
display:block;
float:left;
clear:both;
}
#tab_system .tab_list li a:hover{
text-decoration:underline;
}
And finally the jQuery code...
//tab slider jquery code
$(document).ready(function(){//Default view
$('#current').show();
$('#tab_bar li:nth-child(1) a').addClass('running');
$('#favorite,#all_time').hide();
$('#tab_bar li:nth-child(1) a').click(function(event){//Fire when Current hit clicks
event.preventDefault();
$(this).addClass('running');
$('#tab_bar li:nth-child(2) a,#tab_bar li:nth-child(3) a').removeClass('running');
$('#current').slideDown(500);
$('#favorite,#all_time').hide();
});
$('#tab_bar li:nth-child(2) a').click(function(event){//Fire when All time clicks
event.preventDefault();
$(this).addClass('running');
$('#tab_bar li:nth-child(1) a,#tab_bar li:nth-child(3) a').removeClass('running');
$('#favorite').slideDown(500);
$('#current,#all_time').hide();
});
$('#tab_bar li:nth-child(3) a').click(function(event){//Fire when Favorite clicks
event.preventDefault();
$(this).addClass('running');
$('#tab_bar li:nth-child(1) a,#tab_bar li:nth-child(2) a').removeClass('running');
$('#all_time').slideDown(500);
$('#favorite,#current').hide();
});
});
That's it. 100% guaranteed the code will work... Thank you...
I'm trying to make a new cool menu animation for my website. But i can't get the menu to animate smoothly.
When I click on a menu item, javascript set a remove all classes "selected" from menu items and add "selected" to menu item that is clicked.
The menu html
<div class="piranya-menu-wrapper responsive">
<ul id="piranya-menu-2" class="piranya-menu open">
<li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first" style="transition-delay: 0s;">Forside</li>
<li data-offset="1" aria-haspopup="true" class="piranya-menu-item-2 piranya-menu-item-intermediate parent selected" style="transition-delay: 0.05s;">
<img src="/Image/8239" alt="menuicon" class="piranya-menu-item-icon">Løsninger <i class="piranya-icon-text piranya-expander"></i>
<ul>
<li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first">Hjemmeside</li>
<li data-offset="1" class="piranya-menu-item-2 piranya-menu-item-intermediate">Webshop</li>
<li data-offset="2" class="piranya-menu-item-3 piranya-menu-item-intermediate">Infoscreen</li>
<li data-offset="3" class="piranya-menu-item-4 piranya-menu-item-intermediate">SEO</li>
<li data-offset="4" class="piranya-menu-item-5 piranya-menu-item-intermediate">Hosting og drift</li>
<li data-offset="5" class="piranya-menu-item-6 piranya-menu-item-last">Special løsninger</li>
</ul>
</li>
<li data-offset="2" aria-haspopup="true" class="piranya-menu-item-3 piranya-menu-item-intermediate parent" style="transition-delay: 0.1s;">
<img src="/Image/8242" alt="menuicon" class="piranya-menu-item-icon">Platform <i class="piranya-icon-text piranya-expander"></i>
<ul>
<li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first">CMS</li>
<li data-offset="1" class="piranya-menu-item-2 piranya-menu-item-intermediate">E-commerce</li>
<li data-offset="2" class="piranya-menu-item-3 piranya-menu-item-intermediate">Social Media</li>
<li data-offset="3" class="piranya-menu-item-4 piranya-menu-item-intermediate">Markedsføring</li>
<li data-offset="4" class="piranya-menu-item-5 piranya-menu-item-intermediate">Infoscreen</li>
<li data-offset="5" class="piranya-menu-item-6 piranya-menu-item-intermediate">Booking</li>
<li data-offset="6" class="piranya-menu-item-7 piranya-menu-item-intermediate">Apps</li>
<li data-offset="7" class="piranya-menu-item-8 piranya-menu-item-last">Integration</li>
</ul>
</li>
<li data-offset="3" aria-haspopup="true" class="piranya-menu-item-4 piranya-menu-item-intermediate parent" style="transition-delay: 0.15s;">
<img src="/Image/8245" alt="menuicon" class="piranya-menu-item-icon">Cases <i class="piranya-icon-text piranya-expander"></i>
<ul>
<li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first">Hjemmeside</li>
<li data-offset="1" class="piranya-menu-item-2 piranya-menu-item-last">Infoscreen</li>
</ul>
</li>
<li data-offset="4" class="piranya-menu-item-5 piranya-menu-item-intermediate" style="transition-delay: 0.2s;">
<img src="/Image/8247" alt="menuicon" class="piranya-menu-item-icon">Support
</li>
<li data-offset="5" class="piranya-menu-item-6 piranya-menu-item-last" style="transition-delay: 0.25s;">
<img src="/Image/8246" alt="menuicon" class="piranya-menu-item-icon">Kontakt
</li>
<div class="close-btn"></div>
</ul>
</div>
The css for the menu
header .piranya-menu
{
display: flex;
width: 100%;
}
#piranya-menu-2 > .piranya-menu-item-first
{
display: none;
}
header .piranya-menu-wrapper.responsive > ul > li
{
padding: 0px 8px;
cursor: pointer;
transition: flex 1000ms ease;
}
header .piranya-menu-wrapper.responsive > ul > li > a
{
color: white;
clear: both;
width: 100%;
float: left;
font-size: .8em;
text-align: center;
}
header .piranya-menu-wrapper.responsive > ul > li.selected
{
flex: 1;
}
header .piranya-menu-wrapper.responsive > ul > li.selected > a
{
line-height: 60px;
clear: none;
width: auto;
font-size: 1em;
padding-right: 5px;
background-color: #00253b;
}
#piranya-menu-2 > li.selected > img
{
height: 32px;
padding: 14px 10px 14px 5px;
margin: 0;
background-color: #00253b;
float: left;
}
header .piranya-menu-wrapper.responsive > ul > li:not(.selected):hover
{
background-color: rgba(0, 37, 59, 0.5);
}
header .piranya-menu-wrapper.responsive > ul > li > img
{
height: 24px;
margin: 8px auto;
float: none;
display: block;
}
But it doesn't look correct. When a menu item is clicked, the text is on a new line and a split second later it's show correctly - Any ideas anyone?
You can see the site here
http://piranya.dk/velkommen
Best Regards
Alex Sleiborg
Do this to fix the animation:
body > div.main-wrapper > div > header > div.lower > div > div {
max-height: 60px
}
It will prevent the container from expanding to a larger size.
is this smoother yet? javascript doesn't involved yet. And i just removed the sub-menu to see the progress step by step.
header{
width:100%;
position:relative;}
.upper, .lower{
width:100%;
position:relative;
display:flex;
}
.upper{
background:#ccc;
padding:10px 0;
}
.upper img{
width:200px;}
.lower{
background:#000;}
.center{
width:80%;
color:#fff;
text-decoration:none;
align-self:center;
margin:0 auto;}
.center a{
text-decoration:none;
color:#fff;
transition: all 1s ease-in-out}
.lower ul{
list-style: none;
padding:0;
margin:0;
display:flex;
flex-direction:row;
}
.lower li{
height:54px;
width:36px;
margin:5px;
display:flex;
align-items:center;
display:flex;
flex-direction:column;
transition: all 1s ease-in-out
}
.lower img{
height:32px;
margin:2px;
transition: all 1s ease-in-out
}
.lower li:hover{
flex-direction:row;
transition:all 1s ease-in-out;
width:160px;
}
<header>
<div class="upper">
<div class="center">
<img src="http://piranya.dk/image/8254">
</div>
</div>
<div class="lower">
<div class="center">
<ul>
<li>
<img src="http://piranya.dk/Image/8239">
menu
</li>
<li>
<img src="http://piranya.dk/Image/8239">
menu
</li>
<li>
<img src="http://piranya.dk/Image/8239">
menu
</li>
<li>
<img src="http://piranya.dk/Image/8239">
menu
</li>
</ul>
</div>
</div>
</header>
Assuming I have a dropdown menu just like this one:
http://jsfiddle.net/1fb9nqb1/
$('#toggle').click(function () {
$('#dropdown').slideToggle();
$('#opt-slide').toggleClass('open');
});
$('#dropdown > li').click(function () {
$('#dropdown').slideUp();
$('#opt-slide').removeClass('open');
});
* {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
header {
height:200px;
background:#39F;
z-index:4;
}
#opt-slide {
width:300px;
}
#toggle {
background:#099;
display:block;
height:50px;
color:#FFF;
line-height:50px;
z-index:4;
}
#dropdown {
background:#0C9;
list-style:none;
margin-top:0px;
z-index:2;
display:none;
}
#dropdown li {
height:40px;
line-height:40px;
}
#dropdown li:hover {
background:#FAFAFA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="opt-slide"> <span id="toggle">OPTIONS</span>
<ul id="dropdown">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</div>
how can I add animation just like this one:
https://dribbble.com/shots/1621359-Open-Close-Icon-Animation
to support the expand / collapse of the menu?
another thing, is there any way to do the dropdown menu without jQuery?
Thanks
If you check this JS Fiddle, you'll see that I've added two spans #s1 and #s2, with a container div#sign, the span is rotated 45deg but opposite to each others, when the menu is hidden the two spans are position in a way representing an arrow shape, if you click on the toggle span, .class1 and .class2 are added to to #s1 and #s2 respectively, these classes has different margin-left values making the two spans forming the X-shape with transitio, where original margin-left valeus set in each span css with transition to make them moving in and out smoothly instead of just jumping all in css, you could however animate these spans with jquery .animate() setting same values with easing too but since it could be done with css I'd go with it:
Edit-1: Code changed upon a comment, changed div#sign to span#sign and made it a child of span#toggle JS Fiddle 2
Updated Code:
$('#toggle').click(function() {
$('#dropdown').slideToggle();
$('#opt-slide').toggleClass('open');
$('#sign #s1').toggleClass('close1');
$('#sign #s2').toggleClass('close2');
});
$('#dropdown > li').click(function() {
$('#dropdown').slideUp();
$('#opt-slide').removeClass('open');
});
* {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
header {
height:200px;
background:#39F;
z-index:4;
}
#opt-slide {
width:300px;
position:relative;
}
#toggle {
background:#099;
display:block;
height:50px;
color:#FFF;
line-height:50px;
z-index:4;
position:relative;
}
#dropdown {
background:#0C9;
list-style:none;
margin-top:0px;
z-index:2;
display:none;
}
#dropdown li {
height:40px;
line-height:40px;
}
#dropdown li:hover {
background:#FAFAFA;
}
#sign{
width:50px;
height:25px;
display:inline-block;
position:absolute;
top:25px;
right:10px;
}
#sign .s{
width:25px;
height:4px;
display:inline-block;
border-radius:2px;
background-color:white;
position:absolute;
}
#sign #s1{
transform:rotate(45deg);
z-index:100;
margin-left:0;
transition:all 0.5s ease-out;
}
#sign #s2{
transform:rotate(-45deg);
z-index:200;
margin-left:16px;
transition:all 0.5s ease-in;
}
#sign #s2.close2{
margin-left:7px;
transition:all 0.5s ease-out;
}
#sign #s1.close1{
margin-left:7px;
transition:all 0.5s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="opt-slide"> <span id="toggle">OPTIONS<span id="sign"><span id="s1" class="s"></span><span id="s2" class="s"></span></span>
</span>
<ul id="dropdown">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</div>
Hi I posted two days ago and got some feedback but am still having issue getting my drop down nav working. Any feedback on how I can get my drop down nav working or if there is a cleaner, simpler way to execute this?
Here is my code as it stands now with the fixes from the previous post implemented.
JSfiddle as well.
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="template_ss.css"/>
<title></title>
</div>
</head>
<body>
<!--------------------------header--------------------------->
<div id="headerDiv">
<div id="titleDiv">
<p id= "titleText"><span>Ti</span>t<span>le</span></p>
</div>
<div class="navDiv">
<ul class="navUL">
<li>Home</li>
<li>
Top
<ul class="dropdown">
<li>Menu</li>
<li>Plus</li>
<li>Constant</li>
</ul>
</li>
<li>
Browse
<ul class="dropdown">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
Random
<ul class="dropdown">
<li>blank</li>
<li>none</li>
<li>all</li>
</ul>
</li>
<li>
Profile
<ul class="dropdown">
<li>My profile</li>
<li>Edit profile</li>
</ul>
</li>
<li>
How it works
</li>
</ul>
</div>
<div class="searchDiv">
<form>
<input type="text" placeholder="blah..." required>
<input type="button" value="Search">
</form>
</div>
<!---------------------------body--------------------------->
<div class="bodyDiv">
</div>
</body>
</html>
CSS:
/*-------------------header----------------------*/
body{
margin:0px;
}
#headerDiv{
position: fixed;
height:12%;
width:100%;
background-image:url("header.png");
background-repeat:repeat-x;
text-align: center;
}
#titleDiv{
width: auto;
margin: auto 0;
}
#titleText{
color:white;
font-size:130%;
text-allign:center;
font-family:verdana,san serif;
}
span:first-child{
color:red;
}
span{
color:blue;
}
.navDiv{
display:inline-block;
z-index:10;
}
.navUL{
position:relative;
display:inline-block;
list-style-type:none;
margin: auto 0;
padding:0;
border-top:1 solid;
border-right:1 solid;
border-left:1 solid;
width:100%;
}
.navUL:after{
content:"";
display:table;
}
.navUL li{
padding: .2em 2em;
margin:2em,2em,2em,2em;
color: #fff;
background-color: #036;
display:inline-block;
text-align:center;
position:relative;
}
.navUL li:hover{
background-color:#07427c;
}
.navUL li a{
color:#fff;
}
.navUL li p{
margin:0;
}
.dropdown{
position:absolute;
display:none;
background-color:#036;
padding:0
left:0;
}
.navUL ul li:hover > ul{
display:inline;
}
.navUL>ul>li:after{
content:"\25BC";
font-size:.5em;
display:inline;
position:relative;
}
.searchDiv{
display:inline-block;
}
/*------------------body--------------------*/
.bodyDiv{
text-align:center;
float:left;
background-color:grey;
height:80%;
width:70%;
position:relative;
top:80%;
left:50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
I can't be sure exactly what you're looking for, since neither of your two posts specified what your question was, but from looking at your jsfiddle, I saw two noticeable fixes that were needed. First, your html body was floating up into your nav. You need to clear those floats. Secondly, your css for displaying the dropdown was invalid. You were setting a rule on .navUL ul li:hover > ul. Since .navUL is the class of the unordered list, it has no child ul. The proper path would be ul.navUL li:hover ul.
Here is an update of your jsfiddle
What I'm trying to do is ..
when I click the first list item it should display what are the options for that list item
then if the user click any of that options, the slide toggle must not be toggled
that's my problem :<. the toggle enables when i click the item inside the list item
Any kind of help would be great, thanks :D
This is my HTML File
<div class='div_content_wrapper'>
<script src="../../script/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$(".li_submenu_notactive").hide();
$(".li_menu_notactive").click(function(){
$(".li_submenu_notactive", this).slideToggle(120);
});
});
</script>
<div class='div_navigation'>
<ul class='ul_navigation_menu'>
<li class='li_menu_notactive'><label>Home</label>
<ul>
<li class='li_submenu_notactive'><label>Notifications and Schedules for Today</label></li>
</ul>
</li>
<li class='li_menu_active'><label>Crew Management</label>
<ul>
<li class='li_submenu_active'><label>Add Account</label></li>
<li class='li_submenu_notactive'><label>View / Update Account</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>User Management</label>
<ul>
<li class='li_submenu_notactive'><label>Add Account</label></li>
<li class='li_submenu_notactive'><label>View / Update Account</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>Service Management</label>
<ul>
<li class='li_submenu_notactive'><label>Add Services / Types</label></li>
<li class='li_submenu_notactive'><label>View / Update Services</label></li>
<li class='li_submenu_notactive'><label>View / Update Types</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>Schedule Management</label>
<ul>
<li class='li_submenu_notactive'><label>View / Update Schedules</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>Content Management</label>
<ul>
<li class='li_submenu_notactive'><label>Page Wallpapers</label></li>
<li class='li_submenu_notactive'><label>Page Infos</label></li>
<li class='li_submenu_notactive'><label>Employee O.T.M</label></li>
<li class='li_submenu_notactive'><label>Company Logo</label></li>
<li class='li_submenu_notactive'><label>Terms of Services and Conditions</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>Bank Management</label>
<ul>
<li class='li_submenu_notactive'><label>Add Option/Account</label></li>
<li class='li_submenu_notactive'><label>View / Update Option/s</label></li>
<li class='li_submenu_notactive'><label>View / Update Account/s</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>Report Management</label>
<ul>
<li class='li_submenu_notactive'><label>Accounts</label></li>
<li class='li_submenu_notactive'><label>Services</label></li>
<li class='li_submenu_notactive'><label>Schedules</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>Store Configurations</label>
<ul>
<li class='li_submenu_notactive'><label>Manage Store Option/s</label></li>
</ul>
</li>
</ul>
</div>
This is my CSS File
body{
display:inline !important;
font-family:segoe ui;
background-color:#111111;
}
/*divs*/
#div_body_wrapper{
position:absolute;
top:0px;
padding:10px;
}
.div_clear{
clear:both;
}
.div_banner{
float:left;
width:1320px;
min-height:30px;
background-color:black;
color:white;
}
.div_body{
float:left;
width:1125px;
min-height:640px;
background-color:#313131;
margin-left:5px;
}
.div_footer{
float:left;
width:1320px;
height:30px;
background-color:black;
color:white;
padding:5px;
}
.div_navigation{
float:left;
width:180px;
min-height:30px;
background-color:#202020;
}
.div_banner, .div_body, .div_navigation{
padding:5px;
margin-bottom:5px;
}
.div_content_wrapper{
display: block;
overflow:auto;
}
/*divs*/
/*div banner*/
.btn_banner{
float:right;
margin-top:30px;
border:0px;
padding:5px;
background-color:#ffb804;
border-radius:3px;
font-size:18px;
margin-left:5px;
margin-right:5px;
}
.btn_banner:hover{
background-color:#636363;
color:white;
cursor:pointer;
}
/*div banner*/
/*div banner*/
#lbl_banner{
color:white;
font-size:50px;
font-family:Century Gothic;
font-weight:bold;
text-shadow:
-2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
}
/*div banner*/
/*div navigation*/
.ul_navigation_menu{
list-style:none;
padding:0;
}
.ul_navigation_menu li{
list-style:none;
margin-top:5px;
padding-top:5px;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
font-weight:bold;
color:white;
border-style:solid;
border-color: #3e3e3e;
border-width:0px;
border-bottom-width:3px;
}
.ul_navigation_menu li label{
background-color:#ffb804;
border-radius:3px;
color:black;
padding:5px;
}
.ul_navigation_menu li label{
cursor:pointer;
}
.ul_navigation_menu li label{
display:block;
}
.ul_navigation_menu li ul{
list-style:none;
padding:0;
}
.ul_navigation_menu li ul li{
display:block;
list-style:none;
background-color:#111111;
margin-top:5px;
margin-left:10px;
padding-left:5px;
padding-right:5px;
color:white;
font-weight:normal !important;
border-radius:3px;
}
.ul_navigation_menu li ul li label{
background-color:#111111;
color:white;
}
.ul_navigation_menu li ul li:hover > label{
background-color:#4a4a4a;
cursor:pointer;
}
.li_menu_active ul li {
display:block !important;
}
.li_submenu_active label{
background-color:#EB8921 !important;
}
/*div navigation*/
Attach the click event to thelabel to be more explicit and avoid the propagation jsFiddle
$(document).ready(function(){
$(".li_submenu_notactive").hide();
$(".li_menu_notactive label").click(function(){
$(this).next('ul').find(".li_submenu_notactive").slideToggle(120);
});
});
Use next() to transverse to the following ul and slideToggle() the child notactive li
Easiest solution I could think of:
Add the toggle listener to label instead of li
HTML li:
<li class='li_menu_notactive'><label class="li_menu_label">Home</label>
<ul>
<li class='li_submenu_notactive' style="display: none;"><label>Notifications and Schedules for Today</label></li>
</ul>
</li>
JQuery:
$(document).ready(function(){
// we have this done in HTML by adding the following to .li_submenu_notactive :
// style="display: none;"
// $(".li_submenu_notactive").hide();
$(".li_menu_label").click(function(){
// let's find a .li_submenu_notactive element under the same parent as the triggering label
$(this).siblings(".li_submenu_notactive").slideToggle(120);
});
});