Skip navigation
DWQuest
Currently Being Moderated

Is there any quick, simple solution to having a vertical menu/navigation using DW6 fluid grids?

Jan 28, 2013 11:13 AM

I have just started designing with DWCS6 new fluid grid. All seemed to be going well until now...

I need to add a vertical navigation bar to my inside pages which is no problem on a desktop view but in mobile it takes way to much room.
I like the way this dropdown menu works (although horizontal) on templatemonster: http://www.templatemonster.com/demo/42341.html  (I originally purchased the template but after trying to make changes to the template it seems easier starting from scratch).

 

Is there any quick, simple solution to having a vertical menu/navigation using fluid grids that doesn't take up to much room in mobile?

 

Thanks!

 
Replies
  • Currently Being Moderated
    Jan 28, 2013 11:34 AM   in reply to DWQuest

    Sure.  Below, I used a horizontal menu that collapses to vertical when viewport width is reduced.

    http://alt-web.com/FluidGrid/Fluid.html

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 28, 2013 1:12 PM   in reply to DWQuest

    With jQuery:

    http://jsfiddle.net/NancyO/AP9Hm/

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 28, 2013 5:53 PM   in reply to DWQuest

    If you go to Nancy's http://alt-web.com/FluidGrid/Fluid.html, right click anywhere on the page and choose 'view source' or similar, you will get the complete markup of the page.

     

    On line 19 you will notice the attached jQuery file.

     

    To make it easier for you, you could change that line to read

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

    That way you do not need a local version of the jQuery file.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 29, 2013 8:20 AM   in reply to Ben Pleysier

    Or you can use a link to the jQuery CDN (content distribution network):

    <script src="http://code.jquery.com/jquery-latest.min.js">

     

     

    Nancy O.


     
    |
    Mark as:
  • Currently Being Moderated
    Jan 29, 2013 2:37 PM   in reply to DWQuest

    code.jquery is the CDN for all the jQuery libraries. 

    If their site goes down, we all need to duck & cover. 

     

    If you prefer to manually download & host scripts, that's up to you.

     

    There are some good reasons to use scripts hosted on CDNs.  One is that it saves bandwidth for you and your site visitors who probably already have them cached in their browsers from visiting other web sites who use jQuery. 

     

    Six in one hand; half a dozen in the other...

     

     

    Nancy O.

     
    |
    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