Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to create a responsive menu button

    @shristi.shandilya
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 119
    Comment on it

    hii.

    i am providing html,css and jquery code for creating a responsive menu button.

    1.Here's the HTML code:

    <body>
    <nav class="topnavfirst">
                 <ul class="clr">
                     <li>
                        <a href="#">Nerd Digest</a> 
                     </li>
                     <li class="seperator">|</li>
                     <li>
                        <a href="#">Tech Q&amp;A</a> 
                     </li>
                     <li class="seperator">|</li>
                     <li>
                         <a href="#">Find Projects</a>
                     </li>
                     <li class="seperator">|</li>
                     <li>
                         <a href="#">Post Projects</a>
                     </li>
                     <li class="signinMenu">
                        <a href="#" >Sign In!</a> 
                     </li>
                     <li class="registerMenu">
                        <a href="#" >Register!</a> 
                     </li>

                 </ul>
             </nav>
             <span class="menu"></span>
             <nav class="topnavsecond">
                  <ul>
                     <li>
                        <a href="#" class="signin">Sign In!</a> 
                     </li>
                     <li class="seperator">|</li>
                     <li>
                        <a href="#" class="register">Register!</a> 
                     </li>
                 </ul>
              </nav>
        </body>

    2.CSS code:

         body
      {
       background-color:#95897C;
      }
    .topnavfirst 
     {
       float: left;width: 50%;padding: 16px 70px;box-sizing: border-box;
     }
    .topnavfirst ul
     {
      margin: 0 auto;width: 510px;
     }
    .topnavfirst ul li {
    float: left;font-size: 18px;list-style: outside none none;margin-left: 24px;
     }
    .topnavfirst ul li.seperator {
     color: #e0e0e0;
      }
    .topnavfirst ul li a
   {
     color: #ddfbf9;font-size: 16px;
    }
    .topnavsecond {
     box-sizing: border-box;float: right;padding-right: 30px;padding-top: 7px;
     width: 25%;
      }
    .topnavsecond ul {
    float: right;padding: 8px 0;
     }
    .topnavsecond ul li {
     float: left;list-style: outside none none;margin-left: 24px;
     }
    .topnavsecond ul  li .signin {
    color: #FF931E;font-size: 20px;
    }
    .topnavsecond ul li .register {
     color: #C0CC1E;font-size: 20px;
     }
    .topnavsecond ul li.seperator {
    color: #e0e0e0;
     }
    .topnavfirst .signinMenu,.topnavfirst .registerMenu {
     display: none;
     }
    .menu { 
      background: rgba(0, 0, 0, 0) url("menu.png") no repeat;
      cursor: pointer;
      display: none;float: right;
      height: 32px;
      margin-right: 10px;
      width: 34px;
     }


3.**Media query:**

         .topnavfirst
                {
                    width: 170px;
                    display: none;/*this nav will be displayed on click*/
                    position: absolute;
                    right: 7px;
                    top: 55px;
                    background-color: rgba(0,0,0,0.4);
                    border: 2px solid #d77040;
                    border-radius: 5px;
                    padding-bottom: 20px;
                    padding-top: 8px;
                }

                .topnavfirst ul
                {
                    width: 100px;
                }
                .topnavfirst ul li

                {
                    margin-left: 0;
                    padding-top: 10px;
                    text-align: center;
                    float: none;
                }

                .topnavfirst ul li a
                {
                    color: #fff;
                }
                .topnavfirst ul li.seperator 
                {

                    display: none;
                }

                .topnavsecond
                {
                    padding-top: 0px;
                    padding-right: 10px;
                    width: 52%;
                }

                 .menu
                {
                display: block;
                }

    4.Javascript code:

    <script type="text/javascript">
  $(document).ready(function(){
      $(".menu").click(function(){
          $(".topnavfirst").toggle();
      });
     });
</script>

    Note: Please copy paste mentioned code below inside head tag in your html code.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    How to create a responsive menu button
    Javascript
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: