HTML (i am using one nice Tree class from SO, for listing categories):
<ul id="sidebar-menu" class="treeview">
<li class=" active">About this resource</li>
<li class="">What is podiatry?</li>
<li class="">How can a podiatrist help?</li>
<li class="">When you should consult a podiatrist</li>
<li class="has-sub"><span>Foot terminology</span><ul><li class="">Introduction</li>
<li class="">Bones</li>
<li class="">Joints</li>
<li class="">Muscles</li>
<li class="">Tendons and Ligaments</li>
</ul>
</li>
<li class="has-sub"><span>Foot problems</span><ul><li class="">Categories of foot problem</li>
<li class="">The most common foot problems</li>
<li class="has-sub"><span>Achilles problems</span><ul><li class=" indent">The Achilles tendon</li>
<li class=" indent">Achilles tendon xanthomas</li>
<li class=" indent">Achilles tendonitis</li>
<li class=" indent">Peroneal tendon issues</li>
</ul>
</li>
<li class="has-sub"><span>Ankle problems</span><ul><li class=" indent">Sprained ankle</li>
<li class=" indent">Osteochondritis</li>
</ul>
</li>
<li class="has-sub"><span>Ball and arch problems</span><ul><li class=" indent">Over-pronation</li>
<li class=" indent">Metatarsalgia</li>
<li class=" indent">Plantar fibromas</li>
<li class=" indent">Sesamoiditis</li>
<li class=" indent">Inflamed ligaments</li>
</ul>
</li>
<li class="has-sub"><span>Common injuries</span><ul><li class=" indent">Breaks</li>
<li class=" indent">Sprains</li>
<li class=" indent">Fractures</li>
<li class=" indent">Stiffness</li>
<li class=" indent">Osteochondromas</li>
<li class=" indent">Shin splints</li>
</ul>
</li>
<li class="has-sub"><span>Deformities</span><ul><li class=" indent">Bunions</li>
</ul>
</li>
<li class="has-sub"><span>Foot diseases</span><ul><li class=" indent">Arthritis</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS:
/* menu */
#sidebar-menu {
margin:0;
padding:40px 0 40px 0;
list-style-type:none;
}
#sidebar-menu li {
line-height:32px;
padding:0px;
width:100%;
box-sizing:border-box;
}
#sidebar-menu li a, #sidebar-menu li span {
color:#fff;
text-decoration:none;
font-size:15px;
cursor:pointer;
padding-left:43px;
width:100%;
display:block;
box-sizing:border-box;
}
#sidebar-menu li.has-sub ul {
list-style-type:none;
display:none;
padding:0!important;
margin:0!important;
}
/*#sidebar-menu li.has-sub ul li {
padding:0 0 0 0px!important;
}*/
#sidebar-menu li.has-sub ul li a, #sidebar-menu li.has-sub ul li span {
padding-left:58px;
}
#sidebar-menu li.has-sub {
position:relative;
}
#sidebar-menu li.has-sub.triangle-down::after{
content:"";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin:15px 0 0 10px;
padding:15px 0 0 0;
border-top: 5px solid #666;
position:absolute;
left:280px;
top:0px;
}
#sidebar-menu li.has-sub.triangle-up::after {
content:"";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin:15px 0 0 10px;
padding:15px 0 0 0;
border-bottom: 5px solid #666;
position:absolute;
left:280px;
top:0px;
}
#sidebar-menu li.active {
background-image:url("http://bybyweb.com/infobase/images/triangle.png");
background-repeat:no-repeat;
}
#sidebar-menu li:hover {
background-image:url("http://bybyweb.com/infobase/images/triangle.png");
background-repeat:no-repeat;
}
#sidebar-menu li:hover a {
color:#454545!important;
}
#sidebar-menu li.has-sub:hover span {
color:#454545!important;
}
#sidebar-menu li.active a {
color:#454545!important;
}
.indent {
padding-left:36px!important;
}
.indent a {
font-size:14px!important;
}
/* menu */
Most relevant CSS for this problem is:
#sidebar-menu li:hover {
background-image:url(../images/triangle.png);
background-repeat:no-repeat;
}
Desired behavior: Show green highlight when menu item (li) is hovered, and that is partially done. BUT, as you can see, there are some nested lists (parent-child-grandchild... structure), and, when one 'grandchild' is hovered it affects parents too. It will be more clear if you check DEMO:
http://jsfiddle.net/sdsptfL7/3/
To recreate problem (actually, i think it is FEATURE, but my client doesn't think so:)) Click on 'Foot problems', 'Common injuries', and, hover over items in that, last level... You will notice that parent li's are also affected...
So, my question is how to avoid it? How to show highlight on JUST one item (and remove highlight from parents). I am opened to JQuery solution too (my miserable try is commented out in demo).
P.S. I can't change HTML structure, and after all, i think it is pretty good, 'normal', not sure about better solution... more or less classic 'nested lists' menu...
Change #sidebar-menu li:hover to #sidebar-menu li a:hover, #sidebar-menu li span:hover. This will remove the effect from the list item and apply it to the child elements you are currently using.
Alternatively, you can use #sidebar-menu li *:first-child:hover if you cannot guarantee the child element will be an anchor or span element. Here is a fiddle.
Edit: Added snippet and fiddle link.
$( "li.has-sub" ).click(function(e) {
e.stopPropagation();
$( this ).children('ul:first').stop().slideToggle(1000);
//$(this).toggleClass('triangle-down','triangle-up');
});
$( "li.has-sub" ).hover(
function(e) {
e.stopPropagation();
$( this ).addClass('triangle-down');
}, function(e) {
e.stopPropagation();
$( this ).removeClass('triangle-down');
}
);
/*$("#sidebar-menu li:not(.active)").hover(function(e) {
e.stopPropagation();
e.preventDefault();
$(this).css('background-image', 'url(http://bybyweb.com/infobase/images/triangle.png)');
},
function(e) {
e.stopPropagation();
$(this).css('background-image', 'none');
}
);*/
#left-sidebar {
width:332px;
background-color:#61bfee;
box-sizing:border-box;
display:table-cell;
}
/* menu */
#sidebar-menu {
margin:0;
padding:40px 0 40px 0;
list-style-type:none;
}
#sidebar-menu li {
line-height:32px;
padding:0px;
width:100%;
box-sizing:border-box;
}
#sidebar-menu li a, #sidebar-menu li span {
color:#fff;
text-decoration:none;
font-size:15px;
cursor:pointer;
padding-left:43px;
width:100%;
display:block;
box-sizing:border-box;
}
#sidebar-menu li.has-sub ul {
list-style-type:none;
display:none;
padding:0!important;
margin:0!important;
}
/*#sidebar-menu li.has-sub ul li {
padding:0 0 0 0px!important;
}*/
#sidebar-menu li.has-sub ul li a, #sidebar-menu li.has-sub ul li span {
padding-left:58px;
}
#sidebar-menu li.has-sub {
position:relative;
}
#sidebar-menu li.has-sub.triangle-down::after{
content:"";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin:15px 0 0 10px;
padding:15px 0 0 0;
border-top: 5px solid #666;
position:absolute;
left:280px;
top:0px;
}
#sidebar-menu li.has-sub.triangle-up::after {
content:"";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin:15px 0 0 10px;
padding:15px 0 0 0;
border-bottom: 5px solid #666;
position:absolute;
left:280px;
top:0px;
}
#sidebar-menu li.active {
background-image:url("http://bybyweb.com/infobase/images/triangle.png");
background-repeat:no-repeat;
}
/* change #sidebar-menu li:hover to */ #sidebar-menu li a:hover, #sidebar-menu li span:hover {
background-image:url("http://bybyweb.com/infobase/images/triangle.png");
background-repeat:no-repeat;
}
#sidebar-menu li:hover a {
color:#454545!important;
}
#sidebar-menu li.has-sub:hover span {
color:#454545!important;
}
#sidebar-menu li.active a {
color:#454545!important;
}
/* Change .indent to */ .indent a {
padding-left:/*change 36px to */ 72px !important;
}
.indent a {
font-size:14px!important;
}
/* menu */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left-sidebar">
<ul id="sidebar-menu" class="treeview">
<li class=" active">About this resource</li>
<li class="">What is podiatry?</li>
<li class="">How can a podiatrist help?</li>
<li class="">When you should consult a podiatrist</li>
<li class="has-sub"><span>Foot terminology</span><ul><li class="">Introduction</li>
<li class="">Bones</li>
<li class="">Joints</li>
<li class="">Muscles</li>
<li class="">Tendons and Ligaments</li>
</ul>
</li>
<li class="has-sub"><span>Foot problems</span><ul><li class="">Categories of foot problem</li>
<li class="">The most common foot problems</li>
<li class="has-sub"><span>Achilles problems</span><ul><li class=" indent">The Achilles tendon</li>
<li class=" indent">Achilles tendon xanthomas</li>
<li class=" indent">Achilles tendonitis</li>
<li class=" indent">Peroneal tendon issues</li>
</ul>
</li>
<li class="has-sub"><span>Ankle problems</span><ul><li class=" indent">Sprained ankle</li>
<li class=" indent">Osteochondritis</li>
</ul>
</li>
<li class="has-sub"><span>Ball and arch problems</span><ul><li class=" indent">Over-pronation</li>
<li class=" indent">Metatarsalgia</li>
<li class=" indent">Plantar fibromas</li>
<li class=" indent">Sesamoiditis</li>
<li class=" indent">Inflamed ligaments</li>
</ul>
</li>
<li class="has-sub"><span>Common injuries</span><ul><li class=" indent">Breaks</li>
<li class=" indent">Sprains</li>
<li class=" indent">Fractures</li>
<li class=" indent">Stiffness</li>
<li class=" indent">Osteochondromas</li>
<li class=" indent">Shin splints</li>
</ul>
</li>
<li class="has-sub"><span>Deformities</span><ul><li class=" indent">Bunions</li>
</ul>
</li>
<li class="has-sub"><span>Foot diseases</span><ul><li class=" indent">Arthritis</li>
</ul>
</li>
</ul>
</li>
</ul>
<div>
Related
I'm having a hardtime to find out how to make a hover effect to show some other text/buttons. i want to make a sort of nav menu with hovers.
please see the picture for more information;
when you hover to "platenwarmtewisselaar" i want to make a drop down menu over the picture. and when you go to "buizenwarmtewisselaar"or the other text/buttons there will a couple of other options to chose from. how can i insert this into my code?
many thanks!
My code;
<div id="knoppen">
<div id="Plaat" onclick="URL" onmouseover="ShowP()">
<button id="plaatknop">Platenwarmtewisselaar </button>
</div>
<div id="buis">
<button id="buisknop" onclick="URL"onmouseover="ShowB()">Buizenwarmtewisselaar</button>
</div>
<div id="productenplaat">
<div id="gelast">
<button id="gelastknop">Gelasteplatenwisselaar </button>
</div>
<div id="gesoldeerdplaat">
<button id="gesoldeerdknop">gesoldeerde platenwisselaar</button>
</div>
<div id="pakkingenplaat">
<button id="pakkingenknop">platenwisselaar met pakkingen</button>
</div>
</div>
You can use like below code
#menu {
width: 150px;
height: 100%;
background: #424242;
color: white;
float: left;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
list-style: none;
font-size: 20px;
padding: 15px 20px;
cursor: pointer;
}
#menu li:hover {
background-color: #90CAF9;
}
#menu li.active {
background-color: #2196F3;
}
#menu ul li ul {
display: none;
}
#menu ul li.submenu {
position: relative
}
#menu ul li.submenu ul {
position: absolute;
left: 150px;
width: 200px;
top: 0;
background: #333
}
#menu ul li.submenu:hover ul {
display: inline-block
}
<div id="menu">
<ul>
<li onClick="Dashboard();">Platenwarmtewisselaar </li>
<li class="submenu">Buizenwarmtewisselaar >
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Gelasteplatenwisselaar </li>
<li class="submenu">Salary
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Change Password</li>
</ul>
</div>
I'm not sure, but are you talking about this dropdown menu? If so, you can follow the guidelines here.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover
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>
Currently on my site when I have too many links, the link falls down below the navigation. See my example: https://jsfiddle.net/cn6z13n1/
Is it possible instead to have a More Links list item at the far right which will have a dropdown populated with links?
.toolkit_nav {
background:#dfdfdf;
width:100%;
height:40px;
padding:0;
}
.toolkit_nav ul {
margin:0;
}
.toolkit_nav ul .page_item {
display:inline-block;
line-height:40px;
list-style-type:none;
margin:0px;
padding:0 20px;
}
.toolkit_nav ul .page_item:first-child {
margin-left:0;
padding-left:0;
}
.page_item:hover, .current_page_item {
background:grey;
}
.page_item a {
color:black;
font-size: 0.9em;
font-weight: 400;
text-decoration:none;
}
<nav class="toolkit_nav">
<div class="row">
<div class="medium-12 columns">
<ul>
<li class="page_item page-item-1035 current_page_item">Introduction</li>
<li class="page_item page-item-1039">Digital Landscapes</li>
<li class="page_item page-item-1039">Link 4</li>
<li class="page_item page-item-1039">Link 3</li>
<li class="page_item page-item-1039">Link 2</li>
<li class="page_item page-item-1039">Link 1</li>
<li class="page_item page-item-1039">Link 5</li>
</ul>
</div>
</div>
</nav>
You would need to do this in js i suggest something like this
get the width of the row (max width for nav)
loop through the li elements and sum up there width (+ remember to add the width of a "more" element here
when sum of width > width of nav element hide the elements
add js to your "more" button which shows the hidden elements
Following code is not tested but should give you an idea:
var maxWidth = $('#nav').width();
var moreWidth = $('#more').width(); // li "more" element
var sumWidth = moreWidth;
$('#nav li').each(function() {
sumWidth += $(this).width();
if(sumWidth > maxWidth) {
$(this).addClass('hide'); // add css for hide class
}
});
$('#more').on('click', function() {
$('#nav .hide').fadeIn(100);
// You will need more code here to place it correctly, maybe append the elements in an container
});
Here an example with your fiddle:
https://jsfiddle.net/cn6z13n1/3/
Note: this is just a rough draft, you might to calc paddings etc. to make this work rly good
Edit: updated example with $(window).resize() function
https://jsfiddle.net/cn6z13n1/6/
You'll need to change you HTML slightly but this will work.
.toolkit_nav {
background: #dfdfdf;
width: 100%;
height: 40px;
padding: 0;
}
.toolkit_nav ul {
margin: 0;
}
.toolkit_nav ul .page_item {
display: inline-block;
line-height: 40px;
list-style-type: none;
margin: 0px;
padding: 0 20px;
}
.toolkit_nav ul .page_item:first-child {
margin-left: 0;
padding-left: 0;
}
.page_item:hover,
.current_page_item {
background: grey;
}
.page_item a {
color: black;
font-size: 0.9em;
font-weight: 400;
text-decoration: none;
}
/* NEW STUFF */
.sub-nav,
.sub-nav li {
box-sizing: border-box;
}
.more {
position: relative;
}
.more>ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0
}
.more:hover>ul {
display: block;
}
.more>ul>li {
display: block;
width: 100%;
clear: both;
text-align: center;
}
.toolkit_nav ul.sub-nav .page_item:first-child {
padding: 0 20px;
}
<nav class="toolkit_nav">
<div class="row">
<div class="medium-12 columns">
<ul>
<li class="page_item page-item-1035 current_page_item">Introduction
</li>
<li class="page_item page-item-1039">Digital Landscapes
</li>
<li class="page_item page-item-1039">Link 4
</li>
<li class="page_item page-item-1039">Link 3
</li>
<li class="page_item page-item-1039">Link 2
</li>
<li class="page_item page-item-1039 more">More...
<ul class="sub-nav">
<li class="page_item page-item-1039">Link 1
</li>
<li class="page_item page-item-1039">Link 5
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
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);
});
});