Hey all I was wondering if its possible to make a navigation bar item in the menu not be a link and just have dropdowns. Example: This website for the galleries section, want galleries not to be a link to anywhere. http://illuminea.com/sandbox3/ Thanks all
You mean the link will not be displayed in the status bar. But still go to the address when clicking? Yes, you can bind a click even to the nav tags. Use location.href = "http://..."; to direct to your desired link.
No I mean that the word Gallery will show up but when you hover over it its not a link its just a dropdown menu. There does not have to be a gallery page bc the drop down items are all different galleries so we dont wnat a random gallery page. Is this possible?
principally, all you have to do is use <a [COLOR="Red"]href="javascript:void(0)"[/COLOR] title="Galleries">Galleries</a> Code (markup): or may be simply <a [COLOR="Red"]href="#"[/COLOR] title="Galleries">Galleries</a> Code (markup): or else <a href="http://link-to-your-galleries-page" [COLOR="Red"]onclick="return false;"[/COLOR] title="Galleries">Galleries</a> Code (markup): But I see that you have a wordpress generated navbar. So... post again if you require further assisstance.
Hey Thanks for the suggestions none of them seem to be working. They all mess with the gallery tab and dont get rid of the link function. Any further suggestions? Thanks
hmm... what can i say... the first option itself works for me... I added the following script to the head node of your html page and it worked <script type="text/javascript"> jQuery(function($) { $("li.page-item-283").children("a").attr('href', "javascript:void(0)"); }); </script> HTML: hopefully it works for you too...
if you are using wordpress, go to theme editor on your dashboard open header.php then in the head node add the above code like this <head> . . . <script type="text/javascript"> jQuery(function($) { $("li.page-item-283").children("a").attr('href', "javascript:void(0)"); }); </script> </head> HTML: save your file and reload your site . and there you go...
Thank YOU! that worked GREAT> Do mind just explaining to me what that did, so I can know for future reference? Thanks
i used jquery (a javascript framework) to replace the value of href property in the required html node ( <a href="your-galleries-link">.... </a> in this case) with "javascript:void(0)" 1. http://api.jquery.com/jQuery/#jQuery3 explains the meaning of jQuery(function($) { Code (markup): 2. the following code selects the li element with class="page-item-283", which happens to be the one and only nav-bar list item on your page. $("li.page-item-283") Code (markup): refer http://api.jquery.com/jQuery/#jQuery1 3. the next children function selects all immediate children with tag a $("li.page-item-283").[COLOR="Red"]children("a")[/COLOR] Code (markup): refer http://api.jquery.com/children/ 4. next i changed the attribute href to "javascript:void(0)" $("li.page-item-283").children("a").[COLOR="Red"]attr('href', "javascript:void(0)");[/COLOR] Code (markup): refer http://api.jquery.com/attr/ for more on selectors http://www.w3.org/TR/css3-selectors/ you can google for more simply explained stuff on the same issues
Hey thanks, sorry to annoy you again but how would one perform this task if they wanted the whole nav bar not to be links and just have dropdowns?
find what is common in all the links.. i think it is <li class = "page_item"> ( or "page-item" ) just replace the selector in the above query $("[COLOR="Red"]li.page_item[/COLOR]").children("a").attr('href', "javascript:void(0)"); Code (markup): i have not tested it... in case this does not work, use the each function in jquery... refer jquery docs for jquery.each()
I know this is an old post, but there exists an easy work-around for this. Add custom links as parent items in menu and place all your drop-downs under them. Then simply remove the links from the custom items!! So easy. I don't know if this was possible at the time this post was created, but it works now anyway.