Creating menu list with next and prev buttons like carousel - javascript

I'm trying to make a carousel, but I am having issues.
First, when you keep clicking the Next button the function keeps on working where it should be stop if the last item is reached. I don't have any idea on how can I tell to the function to stop working. I managed to do it in the prev button though.
Second, I need it to be flexible because I don't know the width nor the count of the items. For example, if there are only two Items, the button Next and Prev is no longer necessary, I want it to hide or something like if the items are no longer fit in the container then show Next or Prev button.
$(document).ready(function() {
var margin_left = 0;
$('#prev').on('click', function(e) {
e.preventDefault();
if (margin_left != 0) {
margin_left = margin_left + 190;
$('ul#csx-chips-menu-slider').animate({
'margin-left': margin_left
}, 300);
}
});
$('#next').on('click', function(e) {
e.preventDefault();
margin_left = margin_left - 190;
$('ul#csx-chips-menu-slider').animate({
'margin-left': margin_left
}, 300);
});
});
* {
box-sizing: border-box;
}
.chips-slider-container {
border: solid 1px;
width: 100%;
padding: 2px;
}
.chips-slider-parent {
width: 100%;
display: flex;
border: solid 1px;
}
.chips-slider-parent .csx-chips-items {
background-color: #CCCCCC;
padding: 5px;
}
.chips-slider-parent .csx-chips-items:nth-child(2) {
background-color: #DDDDDD;
flex: 1;
display: block;
overflow-x: hidden;
}
.csx-chips-menu {
padding: 0;
margin: 0;
list-style: none;
white-space: nowrap;
}
.csx-chips-menu li {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
border: solid 1px;
}
.csx-chips-sub-menu {
display: none;
position: absolute;
background-color: #FFFFFF;
padding: 0;
margin: 0;
margin-left: -11px;
list-style: none;
}
.csx-chips-sub-menu li {
display: block;
}
.csx-chips-menu li:hover>.csx-chips-sub-menu {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chips-slider-container">
<div class="chips-slider-parent">
<div class="csx-chips-items">
PREV
</div>
<div class="csx-chips-items">
<ul class="csx-chips-menu" id="csx-chips-menu-slider">
<li>
Sample Menu 1
<ul class="csx-chips-sub-menu">
<li>Sample Sub Menu</li>
<li>Sample Sub Menu</li>
<li>Sample Sub Menu</li>
<li>Sample Sub Menu</li>
</ul>
</li>
<li>Sample Menu 2</li>
<li>Sample Menu 3</li>
<li>Sample Menu 4</li>
<li>Sample Menu 5</li>
<li>Sample Menu 6</li>
<li>Sample Menu 7</li>
<li>Sample Menu 8</li>
<li>Sample Menu 9</li>
<li>Sample Menu 10</li>
<li>Sample Menu 11</li>
</ul>
</div>
<div class="csx-chips-items">
NEXT
</div>
</div>
</div>

Here is how I usually do it:
Get the max negative margin by substracting the slider width from the parent width in the getMaxMargin() function. The difference is the maximum offset you can add to the slider.
Then simply use Math.max to make sure to always stay above this limit. And for the other end - to not go above 0 - use Math.min. So the whole magic is this line: margin_left = Math.min(0, Math.max( getMaxMargin(), margin_left + amount ))
$(document).ready(function() {
var margin_left = 0;
$('#prev').on('click', function(e) {
e.preventDefault();
animateMargin( 190 );
});
$('#next').on('click', function(e) {
e.preventDefault();
animateMargin( -190 );
});
const animateMargin = ( amount ) => {
margin_left = Math.min(0, Math.max( getMaxMargin(), margin_left + amount ));
$('ul#csx-chips-menu-slider').animate({
'margin-left': margin_left
}, 300);
};
const getMaxMargin = () =>
$('#csx-chips-menu-slider').parent().width() - $('#csx-chips-menu-slider')[0].scrollWidth;
});

This may help you figure the issue you've got with Next button.
$(document).ready(function(){
$('#btn-nav-previous').click(function(){
$(".menu-inner-box").animate({scrollLeft: "-=100px"});
});
$('#btn-nav-next').click(function(){
$(".menu-inner-box").animate({scrollLeft: "+=100px"});
});
});
nav#menu-container {
background:#586e75;
position:relative;
width:100%;
height: 56px;
}
#btn-nav-previous {
text-align: center;
color: white;
cursor: pointer;
font-size: 24px;
position: absolute;
left: 0px;
padding: 9px 12px;
background: #8f9a9d;
fill:#FFF;
}
#btn-nav-next {
text-align: center;
color: white;
cursor: pointer;
font-size: 24px;
position: absolute;
right: 0px;
padding: 9px 12px;
background: #8f9a9d;
fill:#FFF;
}
.menu-inner-box
{
width: 100%;
white-space: nowrap;
margin: 0 auto;
overflow: hidden;
padding: 0px 54px;
box-sizing: border-box;
}
.menu
{
padding:0;
margin: 0;
list-style-type: none;
display:block;
text-align: center;
}
.menu-item
{
height:100%;
padding: 0px 25px;
color:#fff;
display:inline;
margin:0 auto;
line-height:57px;
text-decoration:none;
text-align:center;
white-space:no-wrap;
}
.menu-item:hover {
text-decoration:underline;
}
.last-item{
margin-right: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="menu-container" class="arrow">
<div id="btn-nav-previous" style="fill: #FFF">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
<path d="M0 0h24v24H0z" fill="none" />
</svg>
</div>
<div id="btn-nav-next">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
<path d="M0 0h24v24H0z" fill="none" />
</svg>
</div>
<div class="menu-inner-box">
<div class="menu">
<a class="menu-item" href="#">Menu 1</a>
<a class="menu-item" href="#">Menu 2</a>
<a class="menu-item" href="#">Menu 3</a>
<a class="menu-item" href="#">Menu 4</a>
<a class="menu-item" href="#">Menu 5</a>
<a class="menu-item" href="#">Menu 6</a>
<a class="menu-item" href="#">Menu 7</a>
<a class="menu-item" href="#">Menu 8</a>
<a class="menu-item" href="#">Menu 9</a>
<a class="menu-item" href="#">Menu 10</a>
<a class="menu-item last-item" href="#">Menu 11</a>
</div>
</div>
</nav>
Notice that I added margin to the last item class.
Credit to Phppot.
EDIT: If you cannot add class to the last item for adding margin on it you can use the following selectors.
:last-of-type
:last-child
e.g.
.two:last-of-type{
color:red;
}
ul :last-child {
color:green;
}
/*These match nothing:*/
.one:last-of-type {
color:pink;
/*.. because li.one is not the last <li>*/
}
.one:last-child {
color: pink;
/*.. because li.one is not the last child*/
}
<ul class="test">
<li class="one">1</li>
<li class="one">2</li>
<li class="one">3</li>
<li class="two">4</li>
<li class="two">This is the last LI type</li>
<dt>This is the last child</dt>
</ul>

Related

How to make an infinite horizontal scroll on list (li) elements

What I am looking to achieve is to make the items in the list continue scrolling even at the last item in both directions. i.e: Let it continue to scroll starting from the first OR last item all over again. I have worked out the HTML and CSS but don't know what method to use in js/jquery. I'd really appreciate any help or a good pointer.
Here is the HTML
<html>
<div class="container">
<ul class="horscroll" id="autoscrollR">
<li>
<a href="#myGallery" data-slide-to="0" data-tooltip="acci"><img
class="img-thumbnail"
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=1" >
</a>
</li>
<li>
<a href="#myGallery2" data-slide-to="1" data-tooltip="aiico"><img
class="img-thumbnail"
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2">
</a>
</li>
<li>
<a href="#myGallery3" data-slide-to="2" data-tooltip="asaba"><img
class="img-thumbnail"
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=3">
</a>
</li>
...........
</ul>
</div> </html>
And the CSS is used is very basic for an example:
.container{
max-width: 100%;
}
.horscroll {
display: -webkit-inline-box;
width: 100%;
overflow: auto;
margin:10px;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.img-thumbnail {
margin: 5px 5px 0px 5px;
border: 1px solid #;
border-radius: 4px;
}
Now the Js function to use is where I am stuck.
Here is the FIDDLE LINK
So you are looking for something like this:-
var bgWidth = 350; //Max-width of <li> you would like to set.
var scrollPos = Math.ceil($('body').width() / 20);
$(document).ready(function() {
$('body').width(bgWidth + $(window).width());
$(window).scroll(function() {
if ($(window).scrollLeft() >= ($('body').width() - $(window).width())) {
$(window).scrollLeft(1 + scrollPos / 4);
} else if ($(window).scrollLeft() == 0) {
$(window).scrollLeft($('body').width() - $(window).width() - scrollPos / 4);
}
});
});
$(window).resize(function() {
$('body').width(bgWidth + $(window).width());
});
.container {
max-width: 100%;
}
.horscroll {
display: -webkit-inline-box;
width: 100%;
overflow: auto;
margin: 10px;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.img-thumbnail {
margin: 5px 5px 0px 5px;
border: 1px solid #;
border-radius: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul class="horscroll" id="autoscrollR">
<li>
<a href="#myGallery" data-slide-to="0" data-tooltip="acci"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=1">
</a>
</li>
<li>
<a href="#myGallery2" data-slide-to="1" data-tooltip="aiico"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2">
</a>
</li>
<li>
<a href="#myGallery3" data-slide-to="2" data-tooltip="asaba"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=3">
</a>
</li>
<li>
<img class="img-thumbnail " src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=4 ">
</li>
<li>
<a href="#myGallery" data-slide-to="0" data-tooltip="acci"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=5">
</a>
</li>
<li>
<a href="#myGallery2" data-slide-to="1" data-tooltip="aiico"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=6">
</a>
</li>
<li>
<a href="#myGallery3" data-slide-to="2" data-tooltip="asaba"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=7">
</a>
</li>
<li>
<img class="img-thumbnail " src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=8 ">
</li>
</ul>
</div>
Hope this helps you!

Problems animating flexbox with css transitions

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>

Javascript Toggle : Hide div on click of anywhere

I have two divs. When I click on 3 dots , then the div is appearing and on clicking the same 3 dots , same div is disappearing. But I want to hide the div, even if I click anywhere in the document.
There are two circles. When I click on one circle, then a div is shown and when I click on another circle, then the opened div is closing and related div is opening but when I click anywhere on the document, then none of the div are closing.
$("#discussion_declined , #discussion_pending").click(function() {
var relatedDiv = $(this).closest('.panel').find('.discussion_edit_div');
relatedDiv.toggle("fast");
$('.discussion_edit_div').not(relatedDiv).hide('fast');
});
.discussion_small_round_div {
width: 25px;
height: 25px;
border-radius: 50%;
position: relative;
background: #2d3446;
bottom: 9px;
left: 15px;
float: right;
}
.discussion_small_round_div:after {
content: '\2807';
font-size: 1.5em;
color: white;
position: absolute;
left: 9px;
top: 1px;
}
.discussion_edit_div {
background: #FFFFFF;
display: none;
position: absolute;
right: 35px;
border: thin #ced0d1 solid;
z-index: 1001;
width: 150px;
box-shadow: 0px 3px 3px #ccc;
}
ul li {
padding: 5px 15px;
list-style-type: none;
color: #838383;
}
ul li:hover {
background: #eeeded;
cursor: pointer;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
<div class="panel-heading no_border_radius bg-dark set_padding_0">
<div class="discussion_small_round_div pull-right cursor_pointer" id="discussion_declined"></div>
</div>
<div class="discussion_edit_div">
<ul>
<li> <span class="glyphicon glyphicon-trash"></span> Replicate</li>
<li><span class="glyphicon glyphicon-trash"></span> Delete</li>
<li><span class="glyphicon glyphicon-ban-circle"></span> Deactivate</li>
</ul>
</div>
</div>
<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
<div class="panel-heading no_border_radius bg-dark set_padding_0">
<div class="discussion_small_round_div pull-right cursor_pointer" id="discussion_pending"></div>
</div>
<div class="discussion_edit_div">
<ul>
<li> <span class="glyphicon glyphicon-trash"></span> Replicate</li>
<li><span class="glyphicon glyphicon-trash"></span> Delete</li>
<li><span class="glyphicon glyphicon-ban-circle"></span> Deactivate</li>
</ul>
</div>
</div>
Praveen's answer is nice but you can also achieve the same without tweaking your HTML.
Just add this to your jQuery:
$(window).click(function() {
//Hide the menus if visible
$('.discussion_edit_div').hide('fast');
});
$("#discussion_declined , #discussion_pending").click(function(e) {
e.stopPropagation();
var relatedDiv = $(this).closest('.panel').find('.discussion_edit_div');
relatedDiv.toggle("fast");
$('.discussion_edit_div').not(relatedDiv).hide('fast');
});
And your are good to go.
This achieves one more thing which is that once you have opened one ul, then you can directly toggle to another ul by clicking once. In Praveen's answer you have to click twice in order to open the other ul.
Check the link:https://jsfiddle.net/zfqqqr1c/1/
How Bootstrap handles this is interesting. They have a mask, and the only thing you can click is the mask or the items in the menu.
$(function () {
$(".mask").hide();
$("nav > ul > li > a").click(function () {
$(this).closest("li").addClass("open");
$(".mask").show();
return false;
});
$(".mask").click(function () {
$(this).hide();
$(".open").removeClass("open");
});
});
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; line-height: 1; box-sizing: border-box;}
body {background-color: #f5f5f5;}
a {text-decoration: none; color: inherit;}
.mask {position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 8;}
nav > ul > li {display: inline-block; position: relative; width: 30%;}
nav > ul > li a {display: block; padding: 5px; border: 1px solid #ccc;}
nav > ul ul {position: absolute; left: 0; right: 0; z-index: 9; display: none;}
nav > ul > li.open > ul {display: block;}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="mask"></div>
<nav>
<ul>
<li>
Main Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>
Main Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>
Main Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
</ul>
</nav>

display a div on hover of an item such that items inside div should be clickable

$().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/

Custom CSS Navigation dropdown

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>

Categories