SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    May 2014
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to create a nav responsive??

    Hello guys!
    I see very many website use nav reponsive, like website msweb.vn. I don't know what is pluing jQuery.
    I hope get help to everyone. Thanks so much!
    Last edited by Mittineague; May 23, 2014 at 01:41. Reason: removing unnecessary link

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There are many examples of those types of nav around and are usually done with css/media queries and a little bit of js/jquery.

    You can do it in CSS only for modern browsers (this is just the example of the side nav and you would need media queries to turn a horizontal nav into a vertical nav).

  3. #3
    SitePoint Member krzysztof-s-w's Avatar
    Join Date
    May 2014
    Location
    Poland
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use media queries and css.
    It's better than jquery and javascript.


    http://docs.webplatform.org/wiki/tut.../media_queries

  4. #4
    SitePoint Member
    Join Date
    May 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might want to check out a responsive framework like bootstrap or foundation. These make building responsive websites much easier (including navigation).

  5. #5
    Non-Member
    Join Date
    May 2014
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use meta viewport nama and content in the header position of html.

    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">


    and then add the media query to the css styles.

    @media only screen and (max-width: 320px) { /*css style coding*/ }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •