1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Navigation bar links

Discussion in 'HTML & Website Design' started by blues44, Jun 20, 2010.

0
  1. #1
    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
     
    blues44, Jun 20, 2010 IP
  2. unigogo

    unigogo Peon

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    unigogo, Jun 20, 2010 IP
  3. blues44

    blues44 Peon

    Messages:
    65
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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?
     
    blues44, Jun 21, 2010 IP
  4. bvraghav

    bvraghav Member

    Messages:
    123
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    33
    #4
    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.
     
    bvraghav, Jun 21, 2010 IP
  5. blues44

    blues44 Peon

    Messages:
    65
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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
     
    blues44, Jun 22, 2010 IP
  6. bvraghav

    bvraghav Member

    Messages:
    123
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    33
    #6
    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... :)
     
    bvraghav, Jun 22, 2010 IP
  7. blues44

    blues44 Peon

    Messages:
    65
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Where exactly in the coding would that need to go?
     
    blues44, Jun 22, 2010 IP
  8. bvraghav

    bvraghav Member

    Messages:
    123
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    33
    #8
    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...
     
    bvraghav, Jun 22, 2010 IP
  9. blues44

    blues44 Peon

    Messages:
    65
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Thank YOU!
    that worked GREAT>
    Do mind just explaining to me what that did, so I can know for future reference?

    Thanks
     
    blues44, Jun 22, 2010 IP
  10. bvraghav

    bvraghav Member

    Messages:
    123
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    33
    #10
    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
     
    bvraghav, Jun 22, 2010 IP
  11. blues44

    blues44 Peon

    Messages:
    65
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    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?
     
    blues44, Jun 24, 2010 IP
  12. bvraghav

    bvraghav Member

    Messages:
    123
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    33
    #12
    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()
     
    bvraghav, Jun 24, 2010 IP
  13. Poyilath

    Poyilath Greenhorn

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #13
    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.
     
    Poyilath, Mar 11, 2013 IP