Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
Like Tree1Likes
  • 1 Post By Vapr_Arts

Thread: Responsive Navigation Menu

  1. #1
    Junior Member
    Join Date
    Aug 2015
    Posts
    2
    Member #
    51610

    Responsive Navigation Menu

    I'd like to create a responsive navigation menu. I'd prefer to use html and css only rather than rely on JQuery or JS if possible.

    The menu should be horizontal when viewed on desktop and when shrunk to mobile, provide a solid background bar with a = that you can click on to drop down the menu.

    HTML

    Code:
    <nav>
      <ul>
        <li>Home</li>
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
      </ul>
    </nav>
    CSS

    Code:
     .nav ul {
        list-style: none;
      }
    
      .nav ul li {
         display: inline;
       }
    
       @media - mobile {
    
       }

  2.  

  3. #2
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Look into media queries. This will help with changing the css styles depending on the screen size.

    To create an interactive menu button without js you will need to use a checkbox method. Its quite simple and can be found on youtube. Look up pure css navigation menu, or something along those lines.

    Basically what will happen is the menu icon will be put inside of a label that is for a checkbox. You hide the checkbox so its not visible and style the label to look like a menu button. From there you can change styles based on if that checkbox is clicked or not.


    Sent from my iPhone using Tapatalk

  4. #3
    Junior Member
    Join Date
    Aug 2015
    Posts
    2
    Member #
    51610
    Sounds like very bad semantics.

  5. #4
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Bad semantics? What exactly are you concerned about?

    This is a very common way of doing a pure css navigation menu. You don't have very many options once you exclude Js. I personally don't use this method but in my opinion its the simplest way of doing what you want.


    Sent from my iPhone using Tapatalk

  6. #5
    Senior Member breno's Avatar
    Join Date
    Feb 2015
    Location
    Australia
    Posts
    138
    Member #
    41574
    Liked
    29 times
    Quote Originally Posted by unplugme71 View Post
    I'd like to create a responsive navigation menu. I'd prefer to use html and css only rather than rely on JQuery or JS if possible.

    The menu should be horizontal when viewed on desktop and when shrunk to mobile, provide a solid background bar with a = that you can click on to drop down the menu.
    You use CSS for styling but I think the functionality is jquery.

    HTML

    Code:
    <nav>
      <ul>
        <li>Home</li>
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
      </ul>
    </nav>
    CSS

    Code:
     .nav ul {
        list-style: none;
      }
    
      .nav ul li {
         display: inline;
       }
    
       @media - mobile {
    
       }
    I think you need jquery is order to get the = menu when in mobile view. I personally don't know if that achievable in CSS. If it is I'd I'd like to see a live example

  7. #6
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Quote Originally Posted by breno View Post
    I think you need jquery is order to get the = menu when in mobile view. I personally don't know if that achievable in CSS. If it is I'd I'd like to see a live example
    Here is a demo

    http://www.cssscript.com/demo/pure-c...dropdown-menu/

    Here is how its achieved

    http://www.cssscript.com/pure-css-mo...dropdown-menu/


    Sent from my iPhone using Tapatalk
    breno likes this.

  8. #7
    Senior Member breno's Avatar
    Join Date
    Feb 2015
    Location
    Australia
    Posts
    138
    Member #
    41574
    Liked
    29 times
    Quote Originally Posted by Vapr_Arts View Post
    Here is a demo

    Mobile-compatible Responsive Dropdown Menu Demo

    Here is how its achieved

    Pure CSS Mobile-compatible Responsive Dropdown Menu - CSS Script


    Sent from my iPhone using Tapatalk
    Hey that's great, thanks.

  9. #8
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Quote Originally Posted by breno View Post
    Hey that's great, thanks.
    No problem. I thought this was more commonly known. Maybe its not?


    Sent from my iPhone using Tapatalk

  10. #9
    Senior Member breno's Avatar
    Join Date
    Feb 2015
    Location
    Australia
    Posts
    138
    Member #
    41574
    Liked
    29 times
    Quote Originally Posted by Vapr_Arts View Post
    No problem. I thought this was more commonly known. Maybe its not?


    Sent from my iPhone using Tapatalk
    It probably is, it makes sense when i see it. I just got a one-track mind sometimes..


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:39 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com