Simple CSS responsive menu for websites and mobile devices

<< More Tips   |   Added On: 26/01/16   |    Category: CSS    |    Number of Views: 611

Tweet

To see the CSS Menu in action please click here

Copy and paste the code below to include the CSS Menu on your own website and modify for your own needs.

Right click and Save As the 3lines.png image below. This image is displayed when the menu falls below 700px and provides the handle that expands the menu on mobile devices.



<style>
#menu_container
{
max-width:700px;
margin: 0 auto;
padding:0px;
overflow:hidden;
}

/* New Menu */
li
{
margin-left:0px;
}

ul
{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #eee;
}

ul .btn
{
text-align:right;
display: none;
cursor: pointer;
}

ul li
{
float: left;
}

ul li a
{
display: block;
padding: 10px;
border-right: 1px dotted #000;
text-decoration: none;
color: #000;
}

li:hover
{
background:#ccc;
}

ul li a:hover
{
color: #fff;
}


@media (max-width:700px) {

ul li
{
float:none;
}

ul .btn
{
display: block;
}

ul .menu li a
{
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #fff;
}

ul .menu
{
display: none;
}

ul li:hover .menu
{
display: block;
}
</style>

<div id="menu_container">
<ul class="nav">
<li>
<a class="btn">
<img src="3lines.png">
</a>
<ul class="menu">
<li>
<a href="http://www.google.com">
Link 1</a>
</li>
<li>
<a href="http://www.mycomputertips.co.uk">
Link 2</a>
</li>
<li>
<a href="http://www.codeweavers.com">
Link 3</a>
</li>
</ul>
</li>
</ul>
</div>