I have been on a project to build a website to help students with revision.
I decided to make use of a cool navbar I found online in the website as I am not much of a professional myself. However, the navbar elements (the navbar is a unordered list which has been styled) don't show when i put any sort of background picture in the 'top' div. When it doesn't have a background picture (like in the fiddle) it is impossible to use the navbar properly.
This is the navbar I used:
http://cssmenumaker.com/menu/responsive-flat-menu#
I have fiddled about the position on the cssmenu div, tried putting it in the nav id and classes (both have styles set in the CSS).
Here is the fiddle
https://jsfiddle.net/jgs5uqxr/
It says I need to attach some code with the fiddle so here is the formating of my navbar
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>Products</a>
<ul>
<li><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
<li><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
I would have expected my chnages to make a working multi-level navbar which I can work with so I can add links to the educational material for students.
Thanks in advance.
Related
So I have a navigation bar with links and sub links. I currently have my links and sub links in the structure ul and li elements. The drop down navigation bar is designed using JavaScript, which is working as intended, minus one issue. I need the parent element to not disappear when the children element are shown. I have included a screenshot below along with the HTML and JS.
Children elements covering parent element
If someone provides an answer can you also explain why the parent gets covered up? I have tried to find this on stack and looked on the web and was not able to find exactly what I was looking for.
Thanks a bunch guys!
function main(){
$('.sub-elements').hide();
$('.main-elements').on('click',function(){
$(this).children().slideToggle(300);
});
}
$(document).ready(main);
<div class = "nav-bar">
<ul class = "nav-drop">
<li class = "main-elements">Link 1
<ul class = "sub-elements">
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</ul>
</li>
<li class = "main-elements">Link 2
<ul class = "sub-elements">
<li>Sub Link 3</li>
<li>Sub Link 4</li>
<li>Sub Link 5</li>
<li>Sub Link 6</li>
</ul>
</li>
<li class = "main-elements"><a href='#'>Link 3</a>
<ul class = "sub-elements">
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
sub links in the structure ul and li elements. The drop down navigation bar is designed using JavaScript, which is working as intended, minus one issue. I need the parent element to not disappear when the children element are shown. I have included a screenshot below along with the HTML and JS.
Children elements covering parent element
If someone provides an answer can you also explain why the parent gets covered up? I have tried to find this on stack and looked on the web and was not able to find exactly what I was looking for.
Thanks a bunch guys!
It should work:
function main() {
$('.sub-elements').hide();
$('.main-elements').on('click', function () {
$(this).find('.sub-elements').slideToggle(300);
});
}
$(document).ready(main);
Maybe you forget to add the children class in jQuery
function main(){
$('.sub-elements').hide();
$('.main-elements').on('click',function(){
$(this).children('.sub-elements').slideToggle(300);
});
}
$(document).ready(main);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class = "nav-bar">
<ul class = "nav-drop">
<li class = "main-elements">Link 1
<ul class = "sub-elements">
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</ul>
</li>
<li class = "main-elements">Link 2
<ul class = "sub-elements">
<li>Sub Link 3</li>
<li>Sub Link 4</li>
<li>Sub Link 5</li>
<li>Sub Link 6</li>
</ul>
</li>
<li class = "main-elements"><a href='#'>Link 3</a>
<ul class = "sub-elements">
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
I am using js mmenu on the shopify site. I run into issue which I cant figure out.
When there is a dropdown menu, parent link becomes not clickable and has #mm-0 at the end of it. I need to keep it as is and link to its own page.
You can see code below. Right now Links "Products" and "About" go to https://www.irestorelaser.com/products/irestore-laser-hair-growth-system#mm-0 . Any help would be great!
<div id="nav" >
<ul>
<li >How it works</li>
<li class="Selected">Products
<ul>
<li class="Selected">Laser Helmet</li>
<li >All Products</li>
</ul>
</li>
<li >About
<ul>
<li >Warranty</li>
</ul>
</li>
</ul>
</div>
I'm creating a whole website using Java / JSP, but also using zurb foundation.
Now I know that you have to call $(document).foundation(); to make foundation work, but because I'm using ajax to switch between screens (does not have that flash effect of that white screen when switching between pages) when I open my home page it executes that method ($(document).foundation();) and everything looks fine.
The problem comes in with the Top Nav bar that I have. If it goes over to the mobile version, you get that Menu button on the right hand side, and switching there between sub categories, shows a "Back" button to go back to the parent category.
The problem begins when I open my next page (using ajax), it now has components on there namely components. These in fact looks way better on foundation than the normal standard html ones. When I execute $(document).foundation(); again, the components goes into the foundation styled components but now with the top nav bar, there are 2 back buttons and that messes around with the functionality of the back button as well i.e. breaks it. When I go to the screen again, it adds another back button and so on.
Is there someway to revert the foundation() method, and then call it again to refresh it?
This is my Top Nav bar.
<div class='fixed contain-to-grid' style='height:67px;'>
<div class='large-12 columns' id='topNav'>
<nav class='top-bar'>
<ul class='title-area'>
<!-- Title Area -->
<li class='name'>
<h1><a href='#'><img src='img/logoLeft.png' style="width:181px;" id='logo'/></a></h1>
</li>
<!-- Remove the class 'menu-icon' to get rid of menu icon. Take out 'Menu' to just have icon alone -->
<li class='toggle-topbar menu-icon'><a href='#'><span>Menu</span></a></li>
</ul>
<section class='top-bar-section'>
<ul class="left">
<li class="divider" id='div1' style='display:none;'></li>
<li class="has-dropdown" id='nonFinNav' style='display:none;'>Non-Financial
<ul class="dropdown">
<li><label>Heading 1</label></li>
<li>Cat 1</li>
<li class="divider"></li>
<li>Cat 2</li>
<li class="divider"></li>
<li>Cat 3</li>
<li class="divider"></li>
<li class="has-dropdown"><a href="#" id='leaveMain'>Cat 4</a>
<ul class="dropdown">
<li><label>Leave</label></li>
<li>SubCat 1</li>
<li class="divider"></li>
<li>SubCat 2</li>
<li class="divider"></li>
<li>SubCat 3</li>
<li class="divider"></li>
</ul></li>
<li class="divider"></li>
</ul>
</li>
<li class="divider" id='div2' style='display:none;'></li>
<li class="has-dropdown" id='FinNav' style='display:none;'><a href="#" style='margin- right:29px;'>Financial</a>
<ul class="dropdown">
<li><label>Heading 2</label></li>
<li>Cat 1</li>
<li class="divider"></li>
<li>Cat 2</li>
<li class="divider"></li>
<li>Cat 3</li>
<li class="divider"></li>
<li>Cat 4</li>
<li class="divider"></li>
</ul>
</li>
<li class="divider" id='div3' style='display:none;'></li>
</ul>
<!-- Right Nav Section -->
<ul class='right'>
<li><a id='logOffButton' style='display:none;'>Log Off</a></li>
<li class='divider'></li>
<li><a id='helpButton'>Help</a></li>
<li class='divider'></li>
</ul>
</section>
</nav>
</div>
</div>
If you need any more info, please ask and I will respond.
Thanks.
I've been having the same issue. I couldn't find a solution through foundation, but I did come up with something that's suitable for my purposes.
Firstly, instead of simply doing $(document).foundation(), I execute
$(document).foundation({topbar : {custom_back_text: false }});
This makes it so that the "back" button is now named after its previous menu. So, each back button title should be unique. It's important that they are unique. Now, I have a script that removes all duplicate menu items, based on their link text. I have it set to trigger each time someone clicks on a menu item with sub-items (foundation gives these a class of 'has-dropdown not-click'). This way the script only runs when it's truly needed.
function (){
var uniqueBackButtons = [];
$.each($('.back'), function(){
if(uniqueBackButtons.indexOf(this.childNodes[0].childNodes[0].childNodes[0].data) == -1){
uniqueBackButtons.push(this.childNodes[0].childNodes[0].childNodes[0].data);
}
else{
$(this).remove();
}
});
}
I also have the same issue.
I think the reason why I do have multiple "back" button is because of multiple declaration of this code:
$(document).foundation();
Notice that I have embedded this
<script src="js/app.js"></script>
that also contains that script. It works to me. I put all my scripts on js/app.js
I'm trying to create a long dropdown nav bar. The HTML structure is the following:
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
<li><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
Visually it looks like this, but for now,
I'd like to add those red arrows for a horizontal scroll/slide the root <li> elements:
The demo of navbar with css is here: http://cssmenumaker.com/builder/800017
I have searched up the web but still could not find any solutions. If somebody has some ideas please share. Thank you!
I'm looking for some help with modifying an existing function which controls the highlighted states of a multi level js accordion menu. I have had to use javascript due to certain css elements not working in safari browsers.
My problem is due to the multi level aspect as when a sub link is clicked, the parent link above it then deselects. I need the parent link to stay active when its sub links are clicked and only deselects when a link outside of that list is clicked upon.
I understand the theory of adding a conditional statement but simply don't know how to apply it correctly within the function...any help would be very much appreciated.
Here is the existing function which tells a link to be active or selected:
var Lst;
function CngClass(obj){
if (Lst) Lst.className='.topnav';
obj.className='selected';
Lst=obj;
}
and here is the menu code:
<ul class="topnav">
<li>Home</li>
<li><a onclick="CngClass(this);" href="#">Top Link 2</a>
<ul>
<li><a onclick="CngClass(this);" href="#">Cookies</a></li>
<li><a onclick="CngClass(this);" href="#">Events</a></li>
<li><a onclick="CngClass(this);" href="#">Forms</a></li>
<li><a onclick="CngClass(this);" href="#">Games</a></li>
<li><a onclick="CngClass(this);" href="#">Images</a></li>
<li><a onclick="CngClass(this);" href="#">Navigations</a>
<ul>
<li><a onclick="CngClass(this);" href="#">CSS</a></li>
<li><a onclick="CngClass(this);" href="#">JavaScript</a></li>
<li><a onclick="CngClass(this);" href="#">JQuery</a></li>
</ul>
</li>
<li><a onclick="CngClass(this);" href="#">Tabs</a></li>
</ul>
</li>
<li><a onclick="CngClass(this);" href="#">Tutorials</a>
<ul>
<li><a onclick="CngClass(this);" href="#">HTML</a></li>
<li><a onclick="CngClass(this);" href="#">CSS</a></li>
<li><a onclick="CngClass(this);" href="#">JavaScript</a></li>
<li><a onclick="CngClass(this);" href="#">Java</a>
<ul>
<li><a onclick="CngClass(this);" href="#">JSP</a></li>
<li><a onclick="CngClass(this);" href="#">JSF</a></li>
<li><a onclick="CngClass(this);" href="#">JPA</a></li>
<li><a onclick="CngClass(this);" href="#">Contact</a></li>
</ul>
</li>
<li><a onclick="CngClass(this);" href="#">Tabs</a></li>
</ul>
</li>
<li><a onclick="CngClass(this);" href="#">Contact</a></li>
<li><a onclick="CngClass(this);" href="#">Upload script</a></li>
Many thanks for any help or ideas...
Oh dear, may I ask why you're not simply using JQuery? It simplifies your task so much more.
I've got a live example with JQuery (took me about 3 mins) you can try. I assume this is what you're trying to accomplish?
You can use the same method in normal javascript as well, except it's more work and probably less efficient.
The general idea is:
remove active class from the current li
find the 3rd parent from the clicked link (li, ul, li) and then apply the active class to
that one instead.
Here's the JQuery
$(document).ready(function(){
$(".topnav li a").click(function(){
//get the ul element
var checkElement = $(this).next();
if(checkElement.is('ul')) {
//check if it's visible
if(!checkElement.is(':visible')) {
$(this).parent().addClass('opened');
checkElement.slideDown();
}else{
$(this).parent().removeClass('opened');
checkElement.slideUp();
}
}
//get the tree node
var parentElement = $(this).parent().parent().parent();
if(parentElement.is('li')){
$(".topnav li.active").removeClass('active');
parentElement.addClass('active');
}
});
});
Here's an example where it highlights the li element you clicked.