Skip navigation
Currently Being Moderated

How to insert the reponsive drop down menu?

Mar 13, 2013 10:00 PM

I want this multi level drop down menu to be included in my site.Here is the link.

http://jasonweaver.name/lab/flexiblenavigation/

 

How could i do it..i have followed the instruction here.but it doesn't work in mobile layout..Pls....help..........

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 14, 2013 12:02 AM   in reply to Roopavathy

    What code have you written in your webpage? Can you post that here?

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 14, 2013 12:16 AM   in reply to Roopavathy

    Have you downloaded and included the required .js files? Does your .html page have these 2 lines?

     

    <script src="js/jquery.flexnav.min.js" type="text/javascript"></script>

        <script type="text/javascript">$(".flexnav").flexNav({'animationSpeed': 150});</script>

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 14, 2013 12:52 AM   in reply to Roopavathy

    Post your FULL code here for us to review - or we'll be taking wild guesses to 'assume' if you've added what needs added or not.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 14, 2013 1:23 AM   in reply to Roopavathy

    This plug-in is built with jQuery 1.9 library. Your page uses 1.6.2.

     

    Change:

     

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

    to:

     

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

     

    The menu should work on mobile layout.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 14, 2013 1:00 PM   in reply to Sudarshan Thiagarajan

    Ooh, where's Al Sparber at a time like this!

     

    Al made a comment recently about jQuery that might be helpful here. He said two things that are totally relevant:

     

    The open source movement is a double-edged sword. It can produce great tools. The jQuery library is a great tool. But it is only a great tool for JavaScript authors. The downside is that the movement, by nature, has zero accountability beyond the core tool.

     

    And also:

     

    JQuery Best Practice: The Definitive Guide:

     

    1. Use jQuery only if you write your own plugins and are prepared to keep everything updated.
    2. See #1.

     

    Make sure you are using the particular version of jQuery with the JavaScript widget that supports it. I have actually seen websites with several different versions of jQuery (which can slow down everything to load all of those versions). I have to wonder if the various versions interfere with each other.

     

    Newer versions of jQuery will "break" JavaScript widgets. So if you are using jQuery, try to load one version and only use widgets that are supported by that version.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 14, 2013 7:44 PM   in reply to mhollis55

    mholis, The many times I've experienced jQuery plug-ins, most of them have been 'downward' friendly.

     

    I use jQuery.noConflict. See here: http://api.jquery.com/jQuery.noConflict/ and it works very well to overcome errors due to conflicts, which is what primarily causes errors on page.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 15, 2013 12:40 AM   in reply to Roopavathy

    Yes, you can.

     

    Flexnav.css, Line 209 find class .navicon.

     

    Change color to anything you'd like. Add:

     

    font-size: 24px;

    to this selector to control the font size. Theyv'e used a special character in there for the triangle. So, a simple font-size change should take care of it for you.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 15, 2013 12:57 AM   in reply to Roopavathy
    • Submenu arrow is within the HTML markup. <i class="navicon">...</i> Replace the triangle character with anything else you want. Or, you could apply a background-image to the 'ul li ul span' selector.

     

    • Height, Line 137 of flexnav.css .flexnav li ul li:

     

    Add

     

    max-height: 32px;

    Change height as desired. 32px fits all text items within it exactly.

     

    • Add background-color to CSS for li ul selector to override background color for the submenus
     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points