Fixed:
So I got this piece of javascript that will show an drop-down menu when the browser is small enough (done with some #media). The menu is created automatically based on the menu for bigger screen sizes. Now my issue is that it also creates links from "Something1" and "Something2".
I would like these to be shown but disables, so not clickable.
JSFiddle
FIX: The only thing what had to be added so that it didn't linked "Something1/2" to non-exsisting pages was :
HTML
<div class="nav">
<nav>
<ul>
<li>Actual Link
</li>
<li> Something1
<ul>
<li>Actual Link
</li>
<li>Actual Link
</li>
</ul>
<li>Something2
<ul>
<li>Actual Link
</li>
<li>Actual Link
</li>
<li>Actual Link
</li>
<li>Actual Link
</li>
</ul>
</li>
<li>Actual Link
</li>
</ul>
</nav>
</div>
JS
// Create the dropdown base
$("<select />").appendTo("nav");
// Create default option "Go to..."
$("<option />", {
"selected": "selected",
"value": "",
"text": "Go to..."
}).appendTo("nav select");
// Populate dropdown with menu items
$("nav a").each(function () {
var el = $(this);
$("<option />", {
"value": el.attr("href"),
"text": el.text()
}).appendTo("nav select");
});
$("nav select").change(function () {
window.location = $(this).find("option:selected").val();
});
Is there any way to accomplish this?
The easiest way to create a blank link would be as followed,
or
I'm not sure which is the best option but I recently started to use the second option. When you use the first option it will add the # symbol to the end of your url which can mess up active nav links.
Related
I need to open a submenu, clicking on the parent element. I could do it this way
$(function(){
$('li.dropdown > a').on('click',function(event){
event.preventDefault();
$(this).toggleClass('selected');
$(this).parent().find('ul').first().toggle(300);
$(this).parent().siblings().find('ul').hide(200);
//Hide menu when clicked outside
$(this).parent().find('ul').parent().mouseleave(function(){
var thisUI = $(this);
$('html').click(function(){
thisUI.children(".dropdown-menu").hide();
thisUI.children("a").removeClass('selected');
$('html').unbind('click');
});
});
});
});
But, sometimes I have an actual link as a parent element. And I'd want to go to that link on click. And open the dropdown otherwise. Tried with a click on dropdown:before/ dropdown:after pseudoelements with no luck. And I can't manage to do it adding a span inside dropdown div.
Thank you for any help.
LE: My HTML structure looks like this
<nav id="main-nav">
<ul>
<li>Home</li>
<li class="dropdown">Main Cat
<ul class="dropdown-menu">
<li>Sub Cat1</li>
<li>Sub Cat2</li>
<li>Sub Cat3</li>
</ul>
</li>
<li>Second Cat</li>
</ul>
</nav>
I have a menu with 3 levels, and I would like to use a class for the first active li and a second class for all other subsequent li. When I click on a selection the level 3 to remain active the whole path (level 1, level 2, level 3). If I click on a selection on level 2 to remain active up to level 2.
I have the following:
$(document).ready(function(){
$('.sf-menu li a').each(function(index) {
if((this.pathname.trim() == window.location.pathname))
$(this).parent().addClass("selected");
var next_li = $(this).parent().next();
$('a', next_li).addClass("selected2");
});
});
I think I got it this time, It's a bit dirty but It works.
First add classes so you can identify first, second and third level <li> elements. Do it in the foreach, or whatever bucle that makes the menu (or by hand if there's no such bucle):
<ul id="navlist" >
<li id="home" class="firstLevel">
<a class="nav" href="home">Home</a>
<ul class="secondLevel">
<li class="secondLevel">
<a class="nav2" href="home">sub-Home1</a>
<ul>
<li class="thirdLevel"><a class="nav3" href="home">sub-sub-Home1></a></li>
<li class="thirdLevel"><a class="nav3" href="home">sub-sub-Home1></a></li>
</ul>
</li>
<li><a class="nav2" href="home">sub-Home2</a></li>
</ul>
</li>
<li id="about" class="firstLevel">
<a class="nav" href="about-us">About Us</a>
</li>
</ul>
Then use jQuery closest. It traverses up the DOM tree and matches the closest item, you can pass a selector (the firstLevel or secondLevel classes we just created):
$('#navlist a').on('click', function (e) {
e.preventDefault(); //prevent the link from being followed
$('#navlist a').removeClass('selected');
$('#navlist a').removeClass('selected2');
$(this).closest('.secondLevel').children('a').addClass('selected2');
$(this).closest('.firstLevel').children('a').addClass('selected2');
$(this).addClass('selected');
});
Then you add !important to the selected class (so when there's a colision like in the About Us link selected is the class that is applied). This is the dirtiest part.
Check a working fiddle: https://jsfiddle.net/4r5vg/661/
I am using Jquery mmenu for my application. My menu contains sub menus. Sub menus are expanded only when user clicks on the main menu item. I want that expanded by default when user clicks on the menu button. How is this possible? I have initialized as follows.
$(document).ready(function () {
console.log('mmenu loading');
$("#menu").mmenu({
slidingSubmenus: false
});
});
Any help is really appreciated.
Thank You
You can give the class ( "mm-opened" ) to the menu which have submenu.
<nav id="menu">
<ul>
<li>Home</li>
//MENU WITH SUBMENU ADD CLASS mm-opened
<li class="mm-opened">
About us
<ul>
<li>History</li>
<li> The team</li>
<li>Our address</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
AND slidingSubmenus to false.
$("#menu").mmenu({
slidingSubmenus: false
});
how do i keep selected tab active after page reload or refresh i have working on drop line navigation menu
function is working fine for parent ul li and also parent active when click on parent link
but problem is that when i click on sub menu link and redirect to another page then clicked parent ul li didn't active and every-time Home Tab active or highlight whenever page refresh or redirect to another page
for example i want like this
Account Menu is parent menu and child menu like user profile and user accounts
when i click user profile or user accounts script should active or highlight
Account Menu Tab Not Home Tab
Here Javascript
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function () {
$("li:first-child").addClass("active");
$('li').click(function () {
$('.secondary li').removeClass('active');
$(this).addClass('active');
});
})
});//]]>
</script>
Html Code
<div role="navigation" id="navPrimary">
<ul class="secondary">
<li >Home</li>
<li>Account Menu
<ul>
<li>OVERVIEW</li>
<li>EDIT PROFILE</li>
<li>MANAGE EMAILS</li>
<li>EDIT PASSWORD</li>
<li>CREDIT CARDS</li>
<li>BANK ACCOUNTS</li>
<li>CLOSE ACCOUNT</li>
<li>LOGOUT</li>
</ul>
</li>
<li>Payments Menu
<ul>
<li>OVERVIEW</li>
<li>EDIT PROFILE</li>
<li>MANAGE EMAILS</li>
<li>EDIT PASSWORD</li>
<li>CREDIT CARDS</li>
<li>BANK ACCOUNTS</li>
<li>CLOSE ACCOUNT</li>
<li>LOGOUT</li>
</ul>
</li>
<li>Request Money
<ul>
<li>Manage Invoices</li>
<li><a href="" >Request Money</a></li>
<li><a href="" >Create Invoice</a></li>
<li><a href="" >Invoice Settings</a></li>
</ul>
</li>
<li><a href="#" >Merchant Services</a></li>
<li><a href="#" >Products & Services</a></li>
</ul>
</div>
Updated Javascript but not working
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
$(document).ready(function () {
var index = Cookies.get('active');
$('.secondary').find('a').removeClass('active');
$(".secondary").find('a').eq(index).addClass('active');
$('.secondary').on('click', 'li a', function (e) {
e.preventDefault();
$('.secondary').find('a').removeClass('active');
$(this).addClass('active');
Cookies.set('active', $('.clearfix a').index(this));
});
});
}//]]>
</script>
You will definitely store somewhere the data, wich was the last active tab. If you want to do this on client side only, one solution can be the cookies. See here: How do I set/unset cookie with jQuery?
If you are using HTML5, then you can use web storage. See here.
If you are rendering your page by PHP, you can use $_SESSION variable for this. When user clicks a tab, you make an ajax request, and store the value of the active tab in a $_SESSION variable, but as i see, you want to do it on the client side.
UPDATE
Ok, i just created it for you.
First thing is to set an id for every a element in my example, to know, wich is that. You can do it some other way, but now this is the most simple.
Second is to download the jquery.cookie.js, and do not use the URL, store it locally.
Third, here could be a problem, if cookies are disabled on the client machine.
You need to do something like this:
HTML
<div role="navigation" id="navPrimary">
<ul class="secondary">
<li>Home</li>
<li>Account Menu
<ul>
<li>OVERVIEW</li>
</ul>
</li>
</ul>
</div>
CSS
.active {font-weight: bold; color: #F00}
JQUERY
ok, stacoverflow does not allow me to paste here a code but i loaded here the
https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js script also!
<script type='text/javascript'>
$(function() {
//$.removeCookie("active");
var activeMenu = $.cookie("active");
console.log(activeMenu);
if (typeof activeMenu === 'undefined') {
$("#home").addClass("active");
} else {
$('#' + activeMenu).addClass('active');
}
$('li a').click(function(e) {
e.preventDefault();
var listItems = $("#navPrimary li a");
listItems.each(function(idx, li) {
$(li).removeClass('active');
});
$(this).addClass('active');
var id = $(this).attr('id');
$.cookie("active", id);
});
})
</script>
I have a dropdown menu by mouse click. When I click on the some "dropdown link", another page of my website is opening but the menu is closed. I need to keep it open and actual "dropdown link" should be shown in bold.
Here is an example of what I have http://jsfiddle.net/dmitry313/dfgjx22j/1/
HTML:
Click me 1
<ul id="menu_list" style="display:none">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
<br>Click me 2
<ul style="display:none">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
Here I have a redirect to another page of website:
<li>Dropdown link</li>
AJAX:
$(document).ready(function(){
var toggleClick = function(){
var divObj = $(this).next();
var nstyle = divObj.css("display");
if(nstyle == "none"){
divObj.slideDown(false,function(){
$("html").bind("click",function(){
$("html").unbind("click");
});
});
}
else {
divObj.slideUp(true,function(){
$("html").bind("click",function(){
$("html").unbind("click");
});
});
}
};
$(".clickme").click(toggleClick);
});
Thanks for any help!
Give your external dropdown link href an extra hashtag parameter
<a id="dropdown-id" href="http://www.yourpage/#dropdown-link-name">Dropdown link</a>
Also give your dropdownlink a unique id
Give the dropdown ul also a unique id name
<ul id="sub-level-1" style="display:none">
When the new page loads, check if the url contains the text #dropdown-link-name, and if it does, set the style of the dropdown element to display:block
$(document).ready(function () {
if (window.location.href.indexOf("#dropdown-link-name") > -1) {
$('#dropdown-class-name').closest("#sub-level-1").css("display","block");
}
});
In this way you have to make a new jquery ready function for every submenu block. I can't give you a jsfiddle, but I tested this locally and it works.