In this tutorial, we are going to discuss how to create simple responsive menu or navigation bar design using CSS. Here we have tried our best to make this tutorial as simple as possible. These days, responsive web design is one of the standard forms of web design.
For creating responsive menu design, we are using the viewport meta tag to control layout on mobile browsers or desktop browser.
viewport meta tag:
When screen size less than or equal to 600 px, then below tag will applicable :
Complete Source for Responsive Menu Bar :
Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/How%20To%20Create%20a%20Responsive%20Top%20Navigation%20Menu%20Bar%20CSS
Demo Link :
https://skptricks.github.io/learncoding/how-to-create-responsive-top-navigation-menu-bar-css/Responsive%20menu%20design%20example.html
This is a simple example for responsive navigation or menu design bar using css. Please do comments in below comment box in case of any questions.
For creating responsive menu design, we are using the viewport meta tag to control layout on mobile browsers or desktop browser.
viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Responsive Menu Tutorial :
Lets see the complete example for the responsive menu design using CSS with the help of viewport design.When screen size less than or equal to 600 px, then below tag will applicable :
@media screen and (max-width: 600px){ }
Complete Source for Responsive Menu Bar :
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> #menu-container { width: 900px; margin: 10px auto; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid #e7e7e7; background-color: #f3f3f3; } li { float: left; border-right: 1px solid #bbb; } li:last-child { border-right: none; } li a { display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; font-weight: bold; } li a:hover:not(.active) { background-color: #e7e7e7; } .active { background-color: #ff3232; } @media screen and (max-width: 600px) { li { float: none; right: 10px; text-align: left; } li a { text-align: left; } #menu-container { width: 300px; } } </style> </head> <body> <div id="menu-container"> <ul> <li><a class="active" href="#home">Home</a> </li> <li><a href="#PHP">PHP</a> </li> <li><a href="#JAVASCRIPT">JAVASCRIPT</a> </li> <li><a href="#JQUERY">JQUERY</a> </li> <li><a href="#AJAX">AJAX</a> </li> <li><a href="#REACTJS">REACTJS</a> </li> <li><a href="#HTML">HTML</a> </li> <li><a href="#about">About Us</a> </li> </ul> </div> </body> </html>
Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/How%20To%20Create%20a%20Responsive%20Top%20Navigation%20Menu%20Bar%20CSS
Demo Link :
https://skptricks.github.io/learncoding/how-to-create-responsive-top-navigation-menu-bar-css/Responsive%20menu%20design%20example.html
This is a simple example for responsive navigation or menu design bar using css. Please do comments in below comment box in case of any questions.
No comments:
Post a Comment