I have simple html code like this jsfiddle file which display an <a> tag named Test. What I am going to do is when I click to this tag Test, a new div with the class name surveySummaryMenu which including 2 other <a> tag named v1 Test and v2 Testshould be displayed. I do this by using CSS:
.surveySummaryList> .active >.surveySummaryMenu {
display: inherit;
}
but i seems not working. Can anyone have an idea?
You could do something like this:
JS:
<script>
function menuButton() {
document.getElementById("menu").style.display = 'block';
}
</script>
HTML:
<div class="row" >
<ul class=" nav surveySummaryList">
<li>
<a href="javascript:" onclick="menuButton();">
<span>Test</span>
</a>
<div class="surveySummaryMenu" id="menu">
<ul class="nav navbar">
<li>
<a href="javascript:">
<i></i> v.<span>2</span>
<span>
<span>Test</span>
</span>
</a>
</li>
<li>
<a href="javascript:">
<i></i> v.<span>1</span>
<span>
<span>Test</span>
</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
CSS:
.surveySummaryList .surveySummaryList {
margin-left: 10px;
}
.surveySummaryList>.active {
padding-left: 6px;
background-color: #EEEEEE;
}
.surveySummaryList .surveySummaryMenu a {
color: white;
}
.surveySummaryList .surveySummaryMenu a:active,
.surveySummaryList .surveySummaryMenu a:visited {
background: rgba(0, 0, 0, 0.8);
}
.surveySummaryList>li .surveySummaryMenu {
background: rgba(0, 0, 0, 0.6);
position: absolute;
left: 100%;
top: 0;
display: none;
color: white;
width: 100%;
min-width: 200px;
z-index: 1001;
}
.surveySummaryList> .active >.surveySummaryMenu {
display: inherit;
}
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 using sortable jquery plugin to create a nested list menu items dragged and dropped from left container to right container.
Each item from left container, I allow one level nested. However, in the right container, I don't want it to be nested more than two levels nested.
function Menu_init() {
// alert('Menu_init');
var oldContainer;
$("ol.example").sortable({
group: 'nested',
exclude: '.unsortable', // exclude module description from being drage droped
afterMove: function(placeholder, container) {
if (oldContainer != container) {
if (oldContainer)
oldContainer.el.removeClass("active");
container.el.addClass("active");
oldContainer = container;
}
},
onDrop: function($item, container, _super) {
container.el.removeClass("active");
_super($item, container);
li = $item;
// console.log(li.children().children().length);
var children = li.children().children();
var child;
var numOfChildren = children.length;
containerID = container.target[0].id;
if (containerID !== 'myUL') {
if (numOfChildren == 1) {
li.children('a').css({
'visibility': 'visible'
});
} else {
for (var element in children) {
child = children[element].nodeName;
if (child == 'LI') {
$(children[element]).find('a').css('visibility', 'visible');
} else if (child == 'A') {
$(children[element]).css('visibility', 'visible');
}
}
}
} else {
li.children('a').css('visibility', 'hidden');
}
}
});
// init filter
// itemFilter("myInput","myUL");
}
$(function() {
Menu_init();
})
div#icon-picker {
margin-top: 20px;
height: 300px !important;
width: 330px !important;
overflow: scroll;
}
div#icon-picker i {
display: inline-block;
padding: 5px;
}
div#icon-picker i:hover {
background: #ccc;
cursor: pointer;
}
body.dragging,
body.dragging *,
.dragged {
cursor: grabbing !important;
cursor: -webkit-grabbing !important;
}
ol.forms,
ol.forms ol,
ol.example2,
ol.example2 ol {
padding-left: 0 !important;
}
ol.forms li,
ol.example2 li {
display: block;
margin: 10px 5px;
padding: 11px;
border: 1px solid #cccccc;
color: #0088cc;
background: #eeeeee;
}
ol.example li a,
ol.example2 i {
font-size: 15px !important;
}
ol.form li>a,
ol.example2 li>a {
line-height: 0px;
margin-top: 15px;
font-size: 16px padding: 15px;
}
ol.example2 li:last-child {
margin-bottom: 10px;
}
li:hover {
cursor: grab !important;
cursor: -webkit-grab !important;
}
li>i {
padding: 4px 7px !important;
}
ol ol {
background: #eeeeee;
}
.dragged {
opacity: 0.5;
}
ol.example li.placeholder {
position: relative;
border: 3px dashed red;
opacity: 0.5;
}
ol.example li.placeholder:before {
/*position: absolute;*/
/* Define arrowhead*/
}
ol.example {
border: 1px solid #ccc;
}
.popover {
height: 400px;
overflow-y: scroll;
}
li>i {
padding: 15px;
cursor: pointer;
}
li .popover {
cursor: pointer;
}
li .popover i {
padding: 10px;
}
li .popover i:hover {
background: #CCC;
}
i.move_right {
visibility: hidden;
}
ol.forms li:hover>i.move_right {
visibility: visible;
animation-name: move-right;
animation-delay: 0s;
animation-duration: 1s;
/*animation-iteration-count: infinite;*/
/*animation-dir*/
}
.opts {
position: absolute;
left: 150px;
top: 0px;
z-index: 1000000000;
list-style-type: none;
/*background: #FFF;*/
}
button.saveChange {
position: absolute;
z-index: 1000000000;
top: 44px;
}
.opts li {
padding: 15px;
background: rgba(0, 0, 0, .8);
}
.bckg {
background: rgba(0, 0, 0, .6);
}
ol.example2>li[data-act='N'] {
text-decoration: underline;
}
/* search box inside select2*/
input.select2-input {
margin: 12px 0 8px 0 !important;
}
div[id^="target"]:not(#target1) {
display: none;
}
/* here to set height and auto scroll for both container*/
ol#myUL,
ol.example {
height: 600px !important;
overflow: scroll;
}
/*div.newMenu{ border: 1 solid black; }*/
ol.example2>li:last-child {
margin-bottom: 30px;
}
div.iconPopover {
top: 0px !important;
}
.modal {
background-color: transparent !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<form class="form-horizontal">
<session id="MenuList">
<div class="container">
<dir class="row">
<div class="col-xs-6">
<h4 class="center">List Available Menu</h4>
<ol class="example forms" id="myUL">
<li>
<i class=""></i>Customer
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol>
<li>
<i class=""></i>Customer A
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Customer B
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Customer C
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
</ol>
</li>
<li>
<i class=""></i>Teller
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol>
<li>
<i class=""></i>Till Open
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Till Close
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Cash Deposit
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Cash Withdrawal
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Till to Till Transfer
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Income Posting
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Expense Posting
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
</ol>
</li>
</ol>
</div>
<div class="col-xs-6">
<h4 class="center">List Available Menu</h4>
<div class="newMenu">
<ol class="example example2 sortable">
</ol>
</div>
</div>
</dir>
</div>
</session>
</form>
</div>
I really have no idea how can I check the nested level of item when it is dragged to from the left container to the right container. I just know the algorithm that if the items already has nested level 2, then I just simply remove <ol></ol> inside the <li>...</li> and append it back if it is in zero or one level nested.
Here to demonstrate what I want it to be and not to be:
Correct nested level which has only 2 levels nested item
Incorrect nested level which has more than 2 levels nested and which I want to set limit to it
Please kindly help me how can I do to check nested level and set limit to it? Thanks.
Since there is no one help answering on this, I would like to share what I have found on this.
The dept item for measuring and set limit for nested item option is something considered for adding into Jquery-sortable by the author, here reference.
Although it is not yet an option, there is an alternative add-on to the built-in method isValidTarget set fourth with plugin:
isValidTarget: function ($item, container) {
var depth = 1, // Start with a depth of one (the element itself)
maxDepth = 2, // *** 3 for my case
children = $item.find('ol').first().find('li');
// Add the amount of parents to the depth
depth += container.el.parents('ol').length;
// Increment the depth for each time a child
while (children.length) {
depth++;
children = children.find('ol').first().find('li');
}
return depth <= maxDepth;
}
function Menu_init() {
// alert('Menu_init');
var oldContainer;
$("ol.example").sortable({
group: 'nested',
exclude: '.unsortable', // exclude module description from being drage droped
afterMove: function(placeholder, container) {
if (oldContainer != container) {
if (oldContainer)
oldContainer.el.removeClass("active");
container.el.addClass("active");
oldContainer = container;
}
},
isValidTarget: function($item, container) {
var depth = 1, // Start with a depth of one (the element itself)
maxDepth = 3, // *** 3 for my case
children = $item.find('ol').first().find('li');
// Add the amount of parents to the depth
depth += container.el.parents('ol').length;
// Increment the depth for each time a child
while (children.length) {
depth++;
children = children.find('ol').first().find('li');
}
return depth <= maxDepth;
},
onDrop: function($item, container, _super) {
container.el.removeClass("active");
_super($item, container);
li = $item;
// console.log(li.children().children().length);
var children = li.children().children();
var child;
var numOfChildren = children.length;
containerID = container.target[0].id;
if (containerID !== 'myUL') {
if (numOfChildren == 1) {
li.children('a').css({
'visibility': 'visible'
});
} else {
for (var element in children) {
child = children[element].nodeName;
if (child == 'LI') {
$(children[element]).find('a').css('visibility', 'visible');
} else if (child == 'A') {
$(children[element]).css('visibility', 'visible');
}
}
}
} else {
li.children('a').css('visibility', 'hidden');
}
}
});
// init filter
// itemFilter("myInput","myUL");
}
$(function() {
Menu_init();
})
div#icon-picker {
margin-top: 20px;
height: 300px !important;
width: 330px !important;
overflow: scroll;
}
div#icon-picker i {
display: inline-block;
padding: 5px;
}
div#icon-picker i:hover {
background: #ccc;
cursor: pointer;
}
body.dragging,
body.dragging *,
.dragged {
cursor: grabbing !important;
cursor: -webkit-grabbing !important;
}
ol.forms,
ol.forms ol,
ol.example2,
ol.example2 ol {
padding-left: 0 !important;
}
ol.forms li,
ol.example2 li {
display: block;
margin: 10px 5px;
padding: 11px;
border: 1px solid #cccccc;
color: #0088cc;
background: #eeeeee;
}
ol.example li a,
ol.example2 i {
font-size: 15px !important;
}
ol.form li>a,
ol.example2 li>a {
line-height: 0px;
margin-top: 15px;
font-size: 16px padding: 15px;
}
ol.example2 li:last-child {
margin-bottom: 10px;
}
li:hover {
cursor: grab !important;
cursor: -webkit-grab !important;
}
li>i {
padding: 4px 7px !important;
}
ol ol {
background: #eeeeee;
}
.dragged {
opacity: 0.5;
}
ol.example li.placeholder {
position: relative;
border: 3px dashed red;
opacity: 0.5;
}
ol.example li.placeholder:before {
/*position: absolute;*/
/* Define arrowhead*/
}
ol.example {
border: 1px solid #ccc;
}
.popover {
height: 400px;
overflow-y: scroll;
}
li>i {
padding: 15px;
cursor: pointer;
}
li .popover {
cursor: pointer;
}
li .popover i {
padding: 10px;
}
li .popover i:hover {
background: #CCC;
}
i.move_right {
visibility: hidden;
}
ol.forms li:hover>i.move_right {
visibility: visible;
animation-name: move-right;
animation-delay: 0s;
animation-duration: 1s;
/*animation-iteration-count: infinite;*/
/*animation-dir*/
}
.opts {
position: absolute;
left: 150px;
top: 0px;
z-index: 1000000000;
list-style-type: none;
/*background: #FFF;*/
}
button.saveChange {
position: absolute;
z-index: 1000000000;
top: 44px;
}
.opts li {
padding: 15px;
background: rgba(0, 0, 0, .8);
}
.bckg {
background: rgba(0, 0, 0, .6);
}
ol.example2>li[data-act='N'] {
text-decoration: underline;
}
/* search box inside select2*/
input.select2-input {
margin: 12px 0 8px 0 !important;
}
div[id^="target"]:not(#target1) {
display: none;
}
/* here to set height and auto scroll for both container*/
ol#myUL,
ol.example {
height: 600px !important;
overflow: scroll;
}
/*div.newMenu{ border: 1 solid black; }*/
ol.example2>li:last-child {
margin-bottom: 30px;
}
div.iconPopover {
top: 0px !important;
}
.modal {
background-color: transparent !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<form class="form-horizontal">
<session id="MenuList">
<div class="container">
<dir class="row">
<div class="col-xs-6">
<h4 class="center">List Available Menu</h4>
<ol class="example forms" id="myUL">
<li>
<i class=""></i>Customer
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol>
<li>
<i class=""></i>Customer A
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Customer B
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Customer C
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
</ol>
</li>
<li>
<i class=""></i>Teller
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol>
<li>
<i class=""></i>Till Open
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Till Close
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Cash Deposit
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Cash Withdrawal
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Till to Till Transfer
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Income Posting
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Expense Posting
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
</ol>
</li>
</ol>
</div>
<div class="col-xs-6">
<h4 class="center">List Available Menu</h4>
<div class="newMenu">
<ol class="example example2 sortable">
</ol>
</div>
</div>
</dir>
</div>
</session>
</form>
</div>
This tiny simple sample snippet helped me achieve my goal.
I hoped this will help for somebody having a problem like this. Thanks.
We have on the product price and sale price
Both classes have width: 50% and inline-block.
I want to write a script that changes style (add class for width 100% and change font style) to the price when there is no sale price.
This is what I tried so far.
This is first code:
jQuery(document).ready(function($) {
if( $('.eg-top-ponudbe-content-element-28').html().trim().length === 0) {
$('.eg-top-ponudbe-content-element-28').hide();
$('.eg-top-ponudbe-content-element-24').addClass('change_regular_price');
}
});
This is second code:
jQuery(document).ready(function($) {
if( $('.eg-top-ponudbe-content-element-28').is(':empty')) {
$('.eg-top-ponudbe-content-element-28').hide();
$('.eg-top-ponudbe-content-element-24').addClass('change_regular_price');
}
});
And also doesn't work because is hiding sale price on all product (also products with sale price )
HTML is:
<div class="price_div">
<div class="esg-content eg-post-903 eg-top-ponudbe-content-element-28-a">
<a class="eg-top-ponudbe-content-element-28 eg-post-903" href="javascript:void(0);" target="_self">regular_price 1.200 €</a></div>
<div class="esg-content eg-post-903 eg-top-ponudbe-content-element-24-a">
<a class="eg-top-ponudbe-content-element-24 eg-post-903" href="javascript:void(0);" target="_self">sale_price 1.100 €</a></div>
</div>
</div>
You have to iterate through every price_div, and find the regular and sale pairs inside of that and then you could update them independent of other price divs. something line:
$(".price_div").each(function(_ix, el) {
var $priceDiv = $(el):
var $regularPrice = $priceDiv.find(".eg-top-ponudbe-content-element-28");
var $salePrice = $priceDiv.find(".eg-top-ponudbe-content-element-24");
if( $regularPrice.is(':empty')) {
$regularPrice.hide();
$salePrice.addClass('change_regular_price');
}
})
You can use jQuery to select the empty sale_price items with $('.sale_price:empty') and then loop through the results by adding a .each()
$('.sale_price:empty').each(function() {
$(this).hide();
$(this).parent().find('.regular_price').addClass('change_regular_price');
})
.sale_price {
width: 50%;
background: red;
float: left;
}
.regular_price {
width: 50%;
background: blue;
float: left;
}
.regular_price.change_regular_price {
width: 100%;
background: green;
float: left;
}
ul {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<div class='sale_price'>
$5.00
</div>
<div class='regular_price'>
$7.00
</div>
</li>
<li>
<div class='sale_price'></div>
<div class='regular_price'>
$8.00
</div>
</li>
<li>
<div class='sale_price'>
$15.00
</div>
<div class='regular_price'>
$17.00
</div>
</li>
</ul>
jQuery(document).ready(function($) {
$( ".price_div" ).each(function() {
var regular_price = $(this).find('div:first-child');
var sale_price = $(this).find('div:last-child');
if( sale_price.find('a').html().trim().length === 0) {
sale_price.hide();
regular_price.addClass('change_regular_price');
}
});
});
.price_div {
margin-bottom: 20px;
width: 600px;
height: 40px;
border: 1px solid #ccc;
}
.price_div div {
display: inline-block;
width: 50%;
height: 40px;
line-height: 40px;
float: left;
text-align: center;
}
.change_regular_price {
width: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="price_div">
<div class="esg-content eg-post-903 eg-top-ponudbe-content-element-28-a">
<a class="eg-top-ponudbe-content-element-28 eg-post-903" href="javascript:void(0);" target="_self">regular_price 1.200 €</a>
</div>
<div class="esg-content eg-post-903 eg-top-ponudbe-content-element-24-a">
<a class="eg-top-ponudbe-content-element-24 eg-post-903" href="javascript:void(0);" target="_self">sale_price 1.100 €</a>
</div>
</div>
<div class="price_div">
<div class="esg-content eg-post-903 eg-top-ponudbe-content-element-28-a">
<a class="eg-top-ponudbe-content-element-28 eg-post-903" href="javascript:void(0);" target="_self">regular_price 1.200 €</a>
</div>
<div class="esg-content eg-post-903 eg-top-ponudbe-content-element-24-a">
<a class="eg-top-ponudbe-content-element-24 eg-post-903" href="javascript:void(0);" target="_self"></a>
</div>
</div>
Desired:
When menu button is clicked and navigation(#mainNav) slides in, check to see if visible. If so, .addClass .is-open to .nav-item. When navigation (#mainNav) is closed, .removeClass .is-open from .nav-item.
Issue:
Class is not being added to .nav-item when navigation is visible(Slides).
HTML
<header>
<!-- Logo and Burger -->
<div class="brand-wrap">
<div class="trigger-wrapper">
<button id="burger">
<div class="nav-trigger-line"></div>
<div class="nav-trigger-line"></div>
<div class="nav-trigger-line"></div>
</button>
</div>
</div>
<!-- End of Logo and Burger -->
<!-- Navigation -->
<nav id="mainNav" class="navbar main-nav">
<div class="nav-container">
<ul class="nav flex-column">
<li class="nav-item">
<span class="nav-number">01.</span><br>Our Company
</li>
<li class="nav-item">
<span class="nav-number">02.</span><br>Our People
</li>
<li class="nav-item">
<a href="services.html" class="nav-link">
<span class="nav-number">03.</span>
<br>Services</a>
</li>
<li class="nav-item">
<span class="nav-number">04.</span><br>Careers
</li>
<li class="nav-item">
<span class="nav-number">05.</span><br>Contact Us
</li>
</ul>
</div>
</nav>
<!-- End of Navigation -->
</header>
CSS
.brand-wrap {
position: fixed;
top: 20px;
right: 20px;
z-index: 999;
}
#burger {
float: right;
margin: 0;
}
.trigger-wrapper {
position: absolute;
right: 5px;
}
.main-nav a {
text-decoration: none;
}
.main-nav {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(35, 31, 32, 1);
}
.nav-container {
margin-top: 80px;
}
.nav-link {
color: #fff;
font-size: 1.5em;
font-weight: 800;
padding: .25em 1em;
}
.nav-link:hover {
color: #82bc00;
}
.nav-number {
font-size: .5em;
font-weight: 600;
}
.nav-trigger-line {
height: 3px;
width: 30px;
background-color: #fff;
margin: 6px auto;
}
JS
// Menu click function
$('#burger').click(function() {
$('#mainNav').toggle();
});
// Check if Nav is visible
if ($('#mainNav').is(':visible')) {
$(".nav-container .nav .nav-item").addClass("is-open");
} else {
$(".nav-container .nav .nav-item").removeClass("is-open");
}
jsfiddle: https://jsfiddle.net/WeebleWobb/auszo29m/2/
You need to send it inside the event handler:
// Menu click function
$('#burger').click(function() {
$('#mainNav').toggle(function () {
// Check if Nav is visible
if ($('#mainNav').is(':visible')) {
$(".nav-container .nav .nav-item").addClass("is-open");
} else {
$(".nav-container .nav .nav-item").removeClass("is-open");
}
});
});
The best thing you can do is, you should put it inside the callback function like above.
$().ready(function() {
// Case : 1
$("li.products").hover(function() {
$(this).parents(".cotnainer-fluid").next().toggleClass("show");
//$("#category-list").css("opacity","1 !important");
});
})
div.banner {
width: 100%;
height: 379px;
}
div.banner>.row {
padding: 0 35px;
}
/* .menu{
background: transparent;
opacity: 0.5;
} */
.menu {
margin-right: 0;
margin-left: 0;
}
#menu-items {
background: #121212;
opacity: 0.7;
}
#menu-items {
padding: 22px;
margin: 0 25px;
text-align: center;
border-radius: 0 0 4px 4px;
}
ul#menu-items li {
list-style: none;
display: inline;
color: #939598;
font: normal 12px/16px Gotham-Medium;
}
ul#menu-items li a {
padding-bottom: 20px;
}
ul#menu-items li>a:hover {
color: #fff;
border-bottom: 4px solid #76bd1c;
}
li.item {
padding: 25px;
}
li.search {
margin-left: 145px;
}
#category-list {
width: 900px;
height: 180px;
margin: 0 auto;
/*
margin-top: -380px;
*/
background-color: #f7f6f5;
position: relative;
top: -380px;
z-index: -1;
display: none;
}
.show {
display: block;
}
/* li.products:hover #category-list{
display: block;
} */
#category-list ul li {
list-style: none;
display: inline-block;
}
.category-menu {
padding-top: 80px;
}
.category-menu {
font: normal 12px/16px Gotham-Medium;
color: #603913;
}
#category-menu-items {
margin-top: 5px;
}
#category-menu-items li {
text-align: center;
}
.padding-left60 {
padding-left: 60px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<srcipt src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<div class="cotnainer-fluid" style="margin-top: 40px;">
<div class="banner">
<div class="row menu">
<ul id="menu-items">
<li class="item">HOME
</li>
<li class="item">ABOUT US
</li>
<li class="item products dropdown">PRODUCTS
</li>
<li class="item">STORE
</li>
<li class="item">CONTACT
</li>
<li class="item">LOGIN
</li>
<li class="item search"><i class="search-icon-header" style="font-size: 16px;"></i>
</li>
<li class="item basket"><i class="glyphicon glyphicon-shopping-cart" style="font-size: 16px;"></i>
</li>
</ul>
</div>
<h1 class="page-title">Some Title</h1>
</div>
</div>
<!-- End Nav items -->
<div id="category-list">
<div class="row category-menu">
<ul id="category-menu-items">
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-biopesticides.png" alt="">
</p>
<p>BIOPESTIDES</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-nutrients.png" alt="">
</p>
<p>NUTRIENTS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-biofertilizers.png" alt="">
</p>
<p>BIOFERTILIZERS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-seeds.png" alt="">
</p>
<p>SEEDS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-garden_Acc.png" alt="">
</p>
<p>GARDEN ACCESSORIES</p>
</a>
</li>
</ul>
</div>
</div>
I have a list of items in navbar, now on hovering on one of the list items i want to display a hidden div which contains another list of items which should be clickable.
In the above code, When I hover on PRODUCTS link; a div shows up. Now, I want to click on items in this div!!!!
I guess I need to check for hasClass('show'), and if so then i should be able to hover and click on the div items.
Any suggestions or help on how to move forward with this?
Priority of ID selector is higher than class selector.
Ref.
//Make sure this style is overwrite the style of #category-list
#category-list.show{
display: block;
}
Replace the style with the below one and try and adjust the position using top of category list
<style>
#category-list {
width: 900px;
height: 180px;
margin: 0 auto;
background-color: #f7f6f5;
position: absolute;
/*top: -380px;*/
z-index: -1;
display: none;
}
#category-list ul li {
list-style: none;
display: inline-block;
}
.show {
display: block !important;
}
Did some work in that jsfiddle.
// Show sub-menu with jQuery
$("ul#menu-items li.products a, ul#menu-items li.products").hover(function(){
console.log("show sub menu");
$("#category-list").show();
});
// Hide sub-menu with jQuery
$("body *").not("#menu-items, li.products, li.products a, #category-list, #category-list *, #category-menu-items, div.categories").hover(function(){
console.log($(this)); // Log the elements that triggers hide of sub menu
$("#category-list").hide();
});
Don't know the pure CSS sub-menu technique yet.
https://jsfiddle.net/mantisse_fr/p1eupdo3/1/