Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create a responsive menu button

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 92
    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

 0 Comment(s)

Sign In
                           OR                           
                           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: