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>
Related
I'm currently in the middle of creating a responsive navigation. I've managed to finish and trying to fix an issue. Whenever I tried resizing the browser, it seems the toggleClass seems to be triggering multiple times. If refresh the browser it works OK, but after resizing it seems to trigger a couple of times in one click.
Here is the code that I have been working on.
JSFiddle - https://jsfiddle.net/kvpyzbxr/1/
<header>
<ul class="navigation secondary-navigation">
<li>
Schools
</li>
<li>
Faculty
</li>
<li>
Research
</li>
<li>
Contact Us
</li>
</ul>
<ul class="navigation primary-navigation">
<li>
Programs
<ul>
<li>Degree Programs</li>
<li>Master in Business Administration</li>
<li>Executive Master in Business Administration</li>
<li>Master in Entrepreneurship</li>
<li>Master of Science and Innovation and Business</li>
<li>Master in Development Management</li>
</ul>
</li>
<li>
Admissions
<ul>
<li>How to Apply</li>
<li>Application Form</li>
<li>Scholarship and Financial Aid</li>
</ul>
</li>
<li>
About Us
<ul>
<li>Why AIM</li>
<li>Leadership</li>
<li>Network and Alliances</li>
<li>Our Brand Story</li>
</ul>
</li>
<li>
News
</li>
<li>
Alumni
<ul>
<li>AIM Leader Magazine</li>
<li>My AIM Connect</li>
<li>Triple A Awardees</li>
</ul>
</li>
<li>
Give
<ul>
<li>Make A Gift</li>
</ul>
</li>
</ul>
</header>
<script>
$(document).ready(function() {
function detectMobile() {
if ($(window).width() < 1080) {
$('header').addClass('mobile');
$('.secondary-navigation').insertAfter('.primary-navigation');
}
else {
$('header').removeClass('mobile');
$('.secondary-navigation').insertBefore('.primary-navigation');
}
$('.navigation li').on('click', function() {
console.log('open');
$(this).toggleClass('expand-menu');
})
}
detectMobile();
$(window).resize(function() {
detectMobile();
})
})
</script>
header {
max-width: 1336px;
margin: 0 auto;
}
header .navigation {
padding: 10px 0;
clear: both;
}
header .navigation li {
padding: 10px;
display: inline-block;
position: relative;
font-family: 'Arial', sans-serif;
background-color: #272041;
color: #fff;
float: left;
}
header .navigation li a {
color: #fff;
}
header .navigation li ul {
position: absolute;
top: 0;
left: 0;
padding-top: 30px;
display: none;
}
header .navigation li ul li {
background-color: #231d39;
color: #95939e;
}
header .navigation li:hover ul {
display: block;
}
header.mobile .navigation li {
display: block;
float: none;
}
header.mobile .navigation li ul {
position: static;
display: none;
height: 0;
}
header.mobile .navigation li.expand-menu ul {
height: initial;
display: block;
}
That's because you add the click-event several times. Every time detectMobile() is called you bind a click event to $('.navigation li'). So just move
$('.navigation li').on('click', function() {
console.log('open');
$(this).toggleClass('expand-menu');
})
outside of your detectMobile() function.
I successfully created this not so bad css-only dropdown. I'm trying to hide the .submenutwo so that it is only visible when .submenu is on hover. If we can do this with css only that would be nice. But if javascript or jQuery can help it's fine.
/* define a fixed width for the entire menu */
.navigation {
min-width: 300px;
}
/* reset our lists to remove bullet points and padding */
.mainmenu,
.submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu li:hover .submenu {
display: block;
min-height: 200px;
height: auto;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #999;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #666;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<nav class="navigation">
<ul class="mainmenu">
<li>Apples
<ul class="submenu">
<li>Green Apples
<ul class="submenutwo">
<li class='listOptionLvlThree'> Option 3
</li>
<li class='listOptionLvlThree'> Option 3
</li>
<li class='listOptionLvlThree'> Option 3
</li>
</ul>
</li>
</ul>
</li>
<li>Oranges
<ul class="submenu">
<li>Option 2
</li>
<li>Option 2
</li>
<li>Option 2
</li>
</ul>
</li>
<li>Grapes
<ul class="submenu">
<li>Purple Grapes
<ul class="submenutwo">
<li class='listOptionLvlThree'> Option 3
</li>
<li class='listOptionLvlThree'> Option 3
</li>
<li class='listOptionLvlThree'> Option 3
</li>
</ul>
</li>
<li>Green Grapes
</li>
<li>Red Grapes
</li>
</ul>
</li>
</ul>
</nav>
.submenutwo {
display: none }
.submenu:hover .submenutwo {
display: initial }
Here's how you can do it in css. Basically, what's happening here is. At first, you just need to hide .submenutwo. After the hover triggered, you just need to bring back the display to the default or even other display value will do.
may be this will help u
/* define a fixed width for the entire menu */
.navigation {
min-width: 300px;
}
.submenutwo {
display: none }
.submenu:hover .submenutwo {
display: initial }
/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu li:hover .submenu {
display: block;
min-height: 200px;
height:auto;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #999;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #666;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<nav class="navigation">
<ul class="mainmenu">
<li>Apples
<ul class="submenu">
<li>Green Apples
<ul class="submenutwo">
<li class='listOptionLvlThree'> Option 3</li>
<li class='listOptionLvlThree'> Option 3</li>
<li class='listOptionLvlThree'> Option 3</li>
</ul>
</li>
</ul>
</li>
<li>Oranges
<ul class="submenu">
<li>Option 2</li>
<li>Option 2</li>
<li>Option 2</li>
</ul>
</li>
<li>Grapes
<ul class="submenu">
<li>Purple Grapes
<ul class="submenutwo">
<li class='listOptionLvlThree'> Option 3</li>
<li class='listOptionLvlThree'> Option 3</li>
<li class='listOptionLvlThree'> Option 3</li>
</ul>
</li>
<li>Green Grapes</li>
<li>Red Grapes</li>
</ul>
</li>
</ul>
</nav>
I have a navigation menu with several accordion-style items. Some "parent" links have more children than others. I'd like to vary the speed of the slideToggle() so that the ones with more children take longer to slideDown(). Here is what I tried, but it's jumping around for some reason. There's no easing happening at all, as you can see.
// Get the height of each list and save it in the data-height attribute
$('.main-nav > ul > li > ul').each(function() {
$(this).slideDown(0);
$(this).data('height', $(this).height());
$(this).slideUp(0);
});
$('.main-nav > ul > li').click(function() {
// Multiply the height of the element by the speed desired
$(this).children().slideToggle($(this).data('height') * 1000, 'easeInOutExpo');
});
.main-nav {
position: fixed;
top: 0;
left: 0;
}
.main-nav ul {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 18px;
}
.main-nav ul li {
padding: 22px 0;
cursor: pointer;
}
.main-nav > ul {
padding: 0 22px;
}
.main-nav > ul > li > ul {
display: none;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<nav class="main-nav">
<ul>
<li>Global
<ul>
<li>Typography</li>
<li>Colors</li>
<li>Icons</li>
</ul>
</li>
<li>Elements
<ul>
<li>Text</li>
<li>Buttons</li>
<li>Lists</li>
<li>Tables</li>
<li>Media</li>
</ul>
</li>
<li>Controls
<ul>
<li>dropdown</li>
<li>alerts</li>
<li>badges</li>
<li>modals</li>
</ul>
</li>
<li>Layout
<ul>
<li>dynamic row</li>
<li>flex</li>
</ul>
</li>
<li>Components
<ul>
<li>cards</li>
<li>banners</li>
<li>itemEditor</li>
<li>itemIndex</li>
<li>jQueryUI</li>
<li>login</li>
<li>main</li>
<li>details (and detail views)</li>
<li>drilldown</li>
<li>mega menu</li>
<li>navigation</li>
<li>search</li>
<li>thick items</li>
<li>widgets</li>
</ul>
</li>
</ul>
</nav>
Instead of going based off height, I'd recommend going based off how many li elements are in the ul (you may need to modify the multiplier if 1000 is too slow for you).
// Get the height of each list and save it in the data-height attribute
$('.main-nav > ul > li > ul').each(function() {
$(this).slideUp(0);
});
$('.main-nav > ul > li').click(function() {
// Multiply the height of the element by the speed desired
$(this).children().slideToggle($(this).find("li").length * 1000, 'easeInOutExpo');
});
.main-nav {
position: fixed;
top: 0;
left: 0;
}
.main-nav ul {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 18px;
}
.main-nav ul li {
padding: 22px 0;
cursor: pointer;
}
.main-nav > ul {
padding: 0 22px;
}
.main-nav > ul > li > ul {
display: none;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<nav class="main-nav">
<ul>
<li>Global
<ul>
<li>Typography</li>
<li>Colors</li>
<li>Icons</li>
</ul>
</li>
<li>Elements
<ul>
<li>Text</li>
<li>Buttons</li>
<li>Lists</li>
<li>Tables</li>
<li>Media</li>
</ul>
</li>
<li>Controls
<ul>
<li>dropdown</li>
<li>alerts</li>
<li>badges</li>
<li>modals</li>
</ul>
</li>
<li>Layout
<ul>
<li>dynamic row</li>
<li>flex</li>
</ul>
</li>
<li>Components
<ul>
<li>cards</li>
<li>banners</li>
<li>itemEditor</li>
<li>itemIndex</li>
<li>jQueryUI</li>
<li>login</li>
<li>main</li>
<li>details (and detail views)</li>
<li>drilldown</li>
<li>mega menu</li>
<li>navigation</li>
<li>search</li>
<li>thick items</li>
<li>widgets</li>
</ul>
</li>
</ul>
</nav>
$(this).data('height') appears to be undefined, so it appears that you end up passing NaN as the first arg to the slideToggle() function, I am not sure what the fix is but hopefully that points you in the right direction
I'm having an issue with my drop down menu. I am trying to have the end result look similar to BestBuy.com's navigation. The code is below along with more explanation at the end.
<div class="navbar">
<ul>
<li>Products
<div class="secondlevel">
<ul>
<li>Testing 1
<div class="thirdlevel two-columns">
<div class="column">
<ul>
<li>Testing 1</li>
<li>Testing 2</li>
<li>Testing 3</li>
<li>Testing 4</li>
</ul>
</div>
<div class="column">
<ul>
<li>Testing 1</li>
<li>Testing 2</li>
<li>Testing 3</li>
<li>Testing 4</li>
</ul>
</div>
</div>
</li>
<li>Testing 2
<div class="thirdlevel">
<ul>
<li>Testing 1</li>
<li>Testing 2</li>
<li>Testing 3</li>
<li>Testing 4</li>
</ul>
</div>
</li>
<li>Testing 3</li>
<li>Testing 4</li>
</ul>
</div>
</li>
<li>Test Link</li>
</div>
and my CSS:
body {
font-family:sans-serif;
background: #eee;
}
.navbar {
background:lightblue;
width: 100%;
padding:0;
}
.navbar ul {
list-style:none;
padding:0;
margin:0;
}
.navbar ul>li {
display:inline-block;
}
.navbar ul li ul>li {
display:block;
}
.secondlevel {
position:absolute;
width:350px;
height:477px;
background:#fff;
padding:0;
border: 1px solid #c3c4c4;
}
.thirdlevel {
position:absolute;
width:350px;
height:477px;
background:lightgreen;
left:350px;
border: 1px solid #c3c4c4;
top:-1px;
}
.thirdlevel.two-columns {
width:700px;
}
.thirdlevel div:first-child {
position:absolute;
left:0;
}
.thirdlevel div {
position:absolute;
right:0;
}
.column {
width:350px;
}
.thirdlevel {
display:none;
}
.secondlevel {
display:none;
}
.navbar li:hover > div:first-child {
display:block;
}
.active {
display:block;
}
The problem I'm having is that when I try to turn the list items into links with: <li><a>Products</a><li>
When I do that, hovering over the element no longer works.
Also, the hover effect doesn't work in IE either. I'm guessing that's because I'm using li:hover.
I was attempting to use jQuery for the hover effect, and I would really like to since I've read that it's better for what I need to do, but my knowledge is limited in that department.
From what I researched I could use something like this:
$(document).ready(function () {
$(".main-nav-item").hover(function () {
$(".secondary-menu").toggleClass("active");
$(".tertiary-menu").toggleClass("hide");
});
});
Of course those classes don't line up with what I have, but that's the gist of what it is. The problem I had with that was I couldn't get it to work on only one child. Hopefully that's the right word. For example: When I hovered over my first <li> it would open all of the submenus. The way it is right now is perfect, except for the fact that nothing can be a link, which is kind of important.
Let me know if you need anymore information.
Try Making the links in the <li><a>Link</a></li> in to block Elements
a { display:block; }
did the trick for me
EDIT (Went Through you Problem)
Does this what you are asking for ..
$(document).ready(function() {
$(".main-nav-item a").hover(function() {
$(".secondlevel").addClass("active");
$(".thirdlevel").addClass("hide");
});
$(".secondlevel").hover(function() {
$(".thirdlevel").addClass("active");
});
});
body {
font-family: sans-serif;
background: #eee;
}
.navbar {
background: #FFE;
width: 100%;
padding: 0;
}
.navbar ul {
list-style: none;
padding: 0;
margin: 0;
}
.navbar ul>li {
display: inline-block;
}
.navbar ul li ul>li {
display: block;
}
.secondlevel {
position: absolute;
width: 350px;
height: 477px;
background: #fff;
padding: 0;
border: 1px solid #c3c4c4;
}
.thirdlevel {
position: absolute;
width: 350px;
height: 477px;
background: #AABC34;
left: 350px;
border: 1px solid #c3c4c4;
top: -1px;
}
.thirdlevel.two-columns {
width: 700px;
}
.thirdlevel div:first-child {
position: absolute;
left: 0;
}
.thirdlevel div {
position: absolute;
right: 0;
}
.column {
width: 350px;
}
.thirdlevel {
display: none;
}
.secondlevel {
display: none;
}
.navbar li:hover > div:first-child {
display: block;
}
.active {
display: block;
}
a {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<ul>
<li class="main-nav-item">
Products
<div class="secondlevel">
<ul>
<li>
Testing 1
<div class="thirdlevel two-columns">
<div class="column">
<ul>
<li>Testing 1
</li>
<li>Testing 2
</li>
<li>Testing 3
</li>
<li>Testing 4
</li>
</ul>
</div>
<div class="column">
<ul>
<li>Testing 1
</li>
<li>Testing 2
</li>
<li>Testing 3
</li>
<li>Testing 4
</li>
</ul>
</div>
</div>
</li>
<li>Testing 2
<div class="thirdlevel">
<ul>
<li>Testing 1
</li>
<li>Testing 2
</li>
<li>Testing 3
</li>
<li>Testing 4
</li>
</ul>
</div>
</li>
<li>Testing 3
</li>
<li>Testing 4
</li>
</ul>
</div>
</li>
<li>Test Link
</li>
</ul>
</div>
Have your tried <li>EXAMPLE</li>? As for the IE side of things, I would recommend using IE specific styling or if you haven't already, used CSS Reset, for a start. Do you have a working example?
I'm taking this CSS-Tricks article and converting it to a UL > LI instead of a DT > DD approach. I just want the pink box to reveal the sub-links when clicked.
For some reason though I cannot get it working. I've created a jsFiddle of it here (click the pink box):
//Accordion
(function($) {
var allPanels = $('ul.sub-level').hide();
$('.click-me').click(function() {
allPanels.slideUp();
alert('slide up');
// Problem line
$(this).parent().next().slideDown();
return false;
});
})(jQuery);
ul { list-style: none; padding:0; margin:0; width: 400px; }
ul li { position:relative; background: #fafafa; margin-bottom:3px; height:20px; }
ul li > ul { margin-left: 30px; background: #e3e3e3; }
.click-me { display:block; width: 20px; height: 20px; position: absolute; top:0; right:0; background: #e4f; cursor: pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Link somewhere</li>
<li>Link somewhere</li>
<li class="test">
Link somewhere
<!-- I want to reveal accordion using this span tag -->
<span class="click-me"></span>
<!-- /end -->
<ul class="sub-level">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
<li>Link somewhere</li>
</li>
</ul>
http://jsfiddle.net/ndczc728/1/
The problem line is this (I think):
// Problem line
$(this).parent().next().slideDown();
Anyone?
You don't need to use parent. Also you have to remove fixed height from li elements:
//Accordion
(function($) {
var allPanels = $('ul.sub-level').hide();
$('.click-me').click(function() {
allPanels.slideUp();
// Problem line
$(this).next().slideDown();
return false;
});
})(jQuery);
ul {
list-style: none;
padding: 0;
margin: 0;
width: 400px;
}
ul li {
position: relative;
background: #fafafa;
margin-bottom: 3px;
}
ul li > ul {
margin-left: 30px;
background: #e3e3e3;
}
.click-me {
display: block;
width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
background: #e4f;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Link somewhere
</li>
<li>Link somewhere
</li>
<li class="test">
Link somewhere
<!-- I want to reveal accordion using this span tag -->
<span class="click-me"></span>
<!-- /end -->
<ul class="sub-level">
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>Link 4
</li>
</ul>
<li>Link somewhere
</li>
</li>
</ul>