Making nav menu cells clickable (instead of just the cell text)

  • Resolved Josh

    (@josh401)


    13 years, 4 months ago

    Hi,

    I am working on a site for a client using the blogolife theme. Here is the code for calling the menu:

    <?php if ($wpl_menu == '' || $wpl_menu == 'Display') { ?>
<nav>
	<?php wp_nav_menu( array('depth' => '3', 'theme_location' => 'primary', 'container' => '' )); ?>
	<div class="left-corner"></div>
	<div class="right-corner"></div>
</nav>
<?php } ?>

    The problem is that just the text in the menu is clickable… not the enire cell.

    So, when adding subpages, if you aren’t lightning fast getting to the submenu before it disappears… because only the text is calling the submenu; rather than the entire cell.

    Anyone with any suggestions? I’m fairly savvy at coding and I should understand most responses.

    https://loadedwithsavings.com (click on “black friday” in the main menu, and SLOWLY move your cursor off the text, and the submenu will disappear). I’d like the entire cell block to be clickable.

    Thank you for any help.

Viewing 5 replies - 16 through 20 (of 20 total)
  • [email protected]

    (@frontdeskcarsondorncom)

    Yes – I used your suggestion and it worked marvelously! Thank you so much!!!

    hi all, I try to doing this for my li. but it doesn’t work at all.

    <script type="text/javascript" >
$(function() {
$('li.clickable').css('cursor', 'pointer')
 .click(function() {
  window.location = $('a', this).attr('href');
  return false;
  });
});
</script>

<ul>
<li class="clickable">
<h2><a href="#">Travel</a></h2>
<p>Content</p>
</li>
</ul>

    @tuanakotta: Two things:
    1. no need to assign the css cursor property via jQuery. You can do that via CSS easily;
    2. You are assigning the URL to the window.location object instead of it’s property, href.
    Try this instead:

    CSS:

    .clickable{
    cursor:pointer;
}

    JS:

    $(function() {
   $('li.clickable').click(function() {
      window.location.href = $('a', this).attr('href');
      return false;
   });
});

    Here is a working JSFiddle.

    BTW, in the JSFiddle above I used a real href value for the link tag, but you can replace it with whatever value.

    Thank you very much Marv. You are very helping.

Viewing 5 replies - 16 through 20 (of 20 total)
  • The topic ‘Making nav menu cells clickable (instead of just the cell text)’ is closed to new replies.