Buy best selling Linux books

<< View More Computer Tips

Added On: 26/01/16   |    Category: CSS    |    Number of Views: 471

Simple CSS responsive menu for websites and mobile devices   

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>

Search Site

Search other tutorials and tips on My Computer Tips by entering your search terms below

Services

The Linux Foundation

Best selling Unix / Linux books
Nvidia Graphics Cards
Save 15% off .CO.UK domains at 123-Reg
Save 15% off .COM domains at 123-Reg
cPanel Hosting Plans
Xilo Web Hosting Plans