Category: CSS

Added: 26th of January 2016

Viewed: 1544 times

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>

Other Tips & Tutorials

CSS

CSS keyframes animation, move text around the screen in a square path

Posted: 2nd of June 2021

Views: 200

CSS

CSS animation, rotate image 90 degrees using transform rotate

Posted: 20th of May 2021

Views: 231

CSS

Alternating div background colours using CSS

Posted: 9th of April 2021

Views: 332

CSS

How I created rounded boxes in the early days of the web using HTML tables and Photoshop

Posted: 6th of March 2021

Views: 397

CSS

Using CSS grids to create a simple grid layout

Posted: 10th of April 2020

Views: 832

CSS

Simple CSS responsive menu for websites and mobile devices

Posted: 26th of January 2016

Views: 1544