WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Making nav menu cells clickable (instead of just the cell text) (21 posts)

  1. 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.

    http://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.

  2. Marventus
    Member
    Posted 2 years ago #

    Hi Josh,

    I don't know if you figured this one out yet or not, but your solution lies in CSS IMHO.
    The way I see it, you have two ways to do this:
    1. Assign the hover state to the parent menu items (<li>) instead of the links contained by them (<li><a>), so that when you move away from the link, the hover is still ongoing because you have not left the item;
    2. Assign the hover state to the links, but set the size of your links to the exact same size as the menu items, so that the links take up the entire space and the hover effect is not interrupted.

    Cheers!

  3. Hi Marventus,

    I've seen you on the forums and appreciate your response.

    I was able to get this resolved. I had to assign a height attribute to the nav ul li CSS style.

    Thank you again for the response :)

  4. Marventus
    Member
    Posted 2 years ago #

    You are welcome.
    I'm glad you were able to resolve this.
    See you around in the forums, :-)

  5. Hello Marventus, I have a question for you. It's funny, because NO ONE in wordpress seems to respond to my queries. I mean, I'll post a question, wait ten or twelve days, resolve it on my own, and come back and close the thread.

    I mean seriously, look at these posts started by me...
    http://wordpress.org/support/topic/submitting-a-new-plugin?replies=3
    http://wordpress.org/support/topic/help-with-plugin-admin-panel-checkbox-saving-its-value?replies=1
    http://wordpress.org/support/topic/changing-plugin-name-2?replies=2
    http://wordpress.org/support/topic/plugin-development-admin-panel-pages?replies=1
    http://wordpress.org/support/topic/page-anchors-1?replies=1

    Do I have enemies here at WordPress? Am I not asking my questions properly?

    Anyways... thanks for reading my rant.

    Can you please take a look at this thread and offer any advice??

    Thanks again,

    - Josh

  6. Marventus
    Member
    Posted 2 years ago #

    Hi Josh,

    Sorry to hear that: I myself don't have anything against you and I've found our previous exchanges really pleasant, so I don't know. My threads go unanswered almost every single time too. I think it's just the way these forums work.

    As to your question, I know the URL of your site, but could you give me the exact URL of the page or post in question?
    Off the top of my head, my thoughts are that the position of the anchor on the page might be browser-specific but it could probably be controlled through JS.

    Cheers!

    Edit: I found this: it seems I was right and you can accomplish this with a little of jQuery.

  7. Okay, good. I was beginning to think I've possibly overstayed my welcome.

    Edit: I found this: it seems I was right and you can accomplish this with a little of jQuery.

    Oh wow... that's GREAT! I'll look into that after I try to get this other issue wrapped up.

    Could you please check my question on this thread? I know you are a little code monkey ;)
    http://wordpress.org/support/topic/how-do-i-get-variables-from-this-function?replies=1

    Thanks, my friend.

  8. frontdesk@carsondorn.com
    Member
    Posted 2 years ago #

    I'm having the problem of my submenu disappearing before you can click on it.

    My site is http://www.sitkasoundsciencecenter.org

    It seems to be happening on the 2nd level of the menu - particullarly under the Sitka Whalefest Tab.

    Can anyone help???

  9. Marventus
    Member
    Posted 2 years ago #

    Hello frontdesk ;-), hello Josh!

    To fix that problem, you need to open the file:

    SSSC/js/menusm.js

    Locate the following chunk of code:

    $('.menusm li').hover(function(){
        $(this).find('ul:first').stop(true,true).slideDown(300).show();
        $(this).addClass('ms_hover');
        $(this).children('a').addClass('ms_hover');
        level++;
      },function(){
        $(this).find('ul:first').stop(true,true).slideUp(200);
        $(this).removeClass('ms_hover');
        $(this).children('a').removeClass('ms_hover');
        level--;
      });

    and delete this line:

    $(this).children('a').addClass('ms_hover');

    as well as this one:

    $(this).children('a').removeClass('ms_hover');

    This will fix your pb.
    Cheers!

  10. frontdesk@carsondorn.com
    Member
    Posted 2 years ago #

    Thanks a lot for the quick response...but it doesn't seem to have solved the problem...

  11. Marventus
    Member
    Posted 2 years ago #

    True. There is still an area of about 2-3px high on the parent <li> where the submenu seems to disappear.
    Try opening your menusm.css, looking for this selector:

    #topnav ul li ul {

    and changing the top property value from 33px to 30px. That should fix the pb once and for all.
    Cheers!

  12. frontdesk@carsondorn.com
    Member
    Posted 2 years ago #

    Okay awesome! That solved the flicker, but if click on the Sitka Whalefest tab and go to About the submenus for Board Members and Staff Members still disappear...Thanks again in advance for your help!!!

  13. Hello Fran :) Glad to see you again! The fireworks were amazing!! I'll respond to your last email here shortly.

    @frontdesk

    Try adding this to your custom css:

    #topnav ul li ul li a.ms_havesubmenu {
        margin-right: 20px;
    }
  14. Marventus
    Member
    Posted 2 years ago #

    @Josh: Glad to hear that! Send me an email as usual whenever you want, ;-)
    @frontdesk: That is so weird. I just tested it in all my browsers (Firefox, Safari, Crhome, Internet Explorer and Opera), all latest versions, and the submenus you mention seem to work fine. Did you already fix it?
    Cheers!

  15. It looks like (via firebug), he used my suggestion above. Hopefully he will drop back by and let us know for sure :)

  16. frontdesk@carsondorn.com
    Member
    Posted 2 years ago #

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

  17. tuanakotta
    Member
    Posted 1 year ago #

    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>
  18. Marventus
    Member
    Posted 1 year ago #

    @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.

  19. Marventus
    Member
    Posted 1 year ago #

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

  20. tuanakotta
    Member
    Posted 1 year ago #

    Thank you very much Marv. You are very helping.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.