如何创建适合移动设备的响应式菜单？

Question

I am new in HTML, CSS and i am trying to make simple responsive menu.After resize the browser menu icon will display and then will click to open menu and.Please check below code.Would you help me in this? Note:I don't want to use bootstrap.

 body{ margin: 0; padding: 0; height: 100%; } #menu-bar { font-size: 20px; text-align: right; cursor: pointer; display: none; } .menu-logo { float: left; } nav{ width: 100%;text-align: center; } nav ul { background-color: #A4D54C; float: right; font-size: 20px; line-height: 50px; } nav li{ display: inline; list-style-type: none; } nav a{ text-decoration: none; padding: 10px; color: #000; text-transform: uppercase; } @media only screen and (max-width: 768px) { .menu-logo { margin-top: -50px; } nav { } nav ul{ float: none; margin-top: 50px; background-color: #A4D54C; } nav li{ display: inline; } nav a{ color: #fff; } } @media only screen and (max-width: 400px) { #menu-bar { display: block; } .menu-logo { width: 100%;text-align: center; } nav { } nav ul{ float: none; margin-top: 50px; background-color: #A4D54C; } nav li{ } nav a{ display: block; color: #fff; border-bottom:1px solid #000; margin: 0; padding: 03px; } }

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <div class="menu-logo"><img src="images/logo.png"></div> <div style="text-align:right"> <span> info@info.com</span> </div> <nav> <span id="menu-bar"><i class="fa fa-bars" aria-hidden="true"></i></span> <ul> <li><a href="">Home</a></li> <li><a href="">about</a></li> <li><a href="">service</a></li> <li><a href="">blog</a></li> <li><a href="">testimonials</a></li> <li><a href="">contact us</a></li> </ul> </nav>

Answer 1

Try Bootstrap framework

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active">
        <a href="#" class="hidden-xs">Home</a>
        <a href="#" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Home</a>
        </li>
                <li>
        <a href="#products" class="hidden-xs">Products</a>
        <a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a>
        </li>
        <li>
        <a href="#overview" class="hidden-xs">Overview</a>
        <a href="#overview" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Overview</a>
        </li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>

http://jsfiddle.net/jaketaylor/84mqazgq/

Answer 2

You can write Media Query for it. if you don't want to use bootstrap.

eg.

you want to make a webpage to be responsive for 768px, then you can write .

@media only screen and (min-width: 768px) {
    body {
        // Your CSS Code Here
    }
}

For reference You can see Here

Answer 3

Try this out :) This work for me. and without bootstrap

 $('#menu-bar').click(function(){ $('nav ul').toggle('blind'); })

 body{ margin: 0; padding: 0; height: 100%; } #menu-bar { font-size: 20px; text-align: right; background-color: #A4D54C; padding:10px; margin-bottom:-50px; color:#fff; cursor: pointer; display: none; } .menu-logo { float: left; } nav{ width: 100%;text-align: center; } nav ul { background-color: #A4D54C; float: right; font-size: 20px; line-height: 50px; } nav li{ display: inline; list-style-type: none; } nav a{ text-decoration: none; padding: 10px; color: #000; text-transform: uppercase; } @media only screen and (max-width: 768px) { .menu-logo { margin-top: -50px; } #menu-bar { display:block; } nav { } nav ul{ float: none; margin-top: 50px; background-color: #A4D54C; display:none; } nav li{ display: block; position:relative; border-bottom:1px solid #fff; } nav a{ color: #fff; } } @media only screen and (max-width: 400px) { #menu-bar { display: block; } .menu-logo { width: 100%;text-align: center; } nav { } nav ul{ float: none; margin-top: 50px; background-color: #A4D54C; } nav li{ } nav a{ display: block; color: #fff; border-bottom:1px solid #000; margin: 0; padding: 03px; } }

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <div class="menu-logo"><img src="images/logo.png"></div> <div style="text-align:right"> <span> info@info.com</span> </div> <nav> <span id="menu-bar"><i class="fa fa-bars" aria-hidden="true"></i></span> <ul> <li><a href="">Home</a></li> <li><a href="">about</a></li> <li><a href="">service</a></li> <li><a href="">blog</a></li> <li><a href="">testimonials</a></li> <li><a href="">contact us</a></li> </ul> </nav>

Answer 4

For responsive menu we start window screen from 768Px so I don't change any thing on your css just replace the media screen 400px with 768px and remove the media section you created for 768px. I also comment out in all 3 section HTML, CSS and jQuery where I change or add with a short description. Any Question ask me in comment. Thank you. LiveFiddle

 $(document).ready(function() { $('#menu-bar').click(function() { $("nav ul").slideToggle("slow"); /* this function show/hide the menu when you click the bar icon */ }) $('nav ul li a').click(function() { $('nav ul ').slideToggle("slow"); /* this function hide the menu when you click on a link*/ }) });

 body { margin: 0; padding: 0; height: 100%; } #menu-bar { font-size: 20px; text-align: right; cursor: pointer; display: none; } .menu-logo { float: left; } nav { width: 100%; text-align: center; } nav ul { background-color: #A4D54C; float: right; font-size: 20px; line-height: 50px; } nav li { display: inline; list-style-type: none; } nav a { text-decoration: none; padding: 10px; color: #000; text-transform: uppercase; } @media only screen and (max-width: 768px) { #menu-bar { display: block; margin-right: 10px; /* set this margin because its close to the window screen*/ } .menu-logo { width: 100%; text-align: center; } nav {} nav ul { float: none; display: none; /* set display none for use the click fucntion to show the menu*/ background-color: #A4D54C; /* Set margin and padding 0 for full width border bottom*/ margin:0; padding: 0; } nav li {} nav a { display: block; color: #fff; border-bottom: 1px solid #000; margin: 0; padding: 3px; } }

 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <div class="menu-logo"><img class="logo-img" src="#"></div> <div style="text-align:right;margin-right:10px;"> <!-- set this margin-right 10px because its close to the window screen --> <span> info@info.com</span> </div> <nav> <span id="menu-bar"><i class="fa fa-bars" aria-hidden="true"></i></span> <ul> <li><a href="#">Home</a></li><!--add href="#" to see the jQuery click function is working or not --> <li><a href="#">about</a></li> <li><a href="#">service</a></li> <li><a href="#">blog</a></li> <li><a href="#">testimonials</a></li> <li><a href="#">contact us</a></li> </ul> </nav>