Responsive menu

Responsive menu

Posted in: css by musiitwa joseph 2015-02-14 at 00:21:23

image for Responsive menu When the browser window is re-sized to less than 950px, the menu changes from horizontal display to a vertical display that shows on hover. This is a good feature for responsive design making the menu suitable for different device screens like laptops, desktops, tabs etc

*{
margin:0;
padding:0;
}
body{
background:#CCCCCC;
font-family: Arial, Helvetica, sans-serif;
}
.container{
max-width:1200px;
margin:auto;
width:95%;
}
.menu_top{
font-size:18px;
}
.menu_top ul{
display:block;
list-style:none;
margin-top:10px;
padding:0 15px;
box-shadow:0 0 10px rgba(0,0,0,.5);
border-radius:8px;
background:linear-gradient(180deg, #FFFFFF, #6600CC);
}
.menu_top ul li{
display:inline-block;
margin:0;
padding:0;
min-width:100px;
margin-left:-5px;
border-left:1px solid rgba(0,0,0,.5);
text-shadow:0 0 2px #000;
background:linear-gradient(180deg, #FFFFFF, #6600CC);
transition: all 0.3s linear 0s;
}
.menu_top ul li:last-child{
border-right:1px solid rgba(0,0,0,.5);
}
.menu_top li a{
text-align:center;
text-decoration:none;
outline:none;
display:block;
padding:8px;
color:rgba(250,250,250,.9);
text-shadow:0 0 0 2px rgb(0,0,0);
}
.menu_top li:hover{
background:#9FB0F4;
}
.menu_top ul .active{
background:linear-gradient(180deg, #6600CC, #FFFFFF);
}


@media (max-width: 950px){
.menu_button {
display:block;
position:relative;
width:38px;
background-color:#CCCCCC;
border-radius:2px;
margin:4px;
cursor:pointer;
box-shadow:2px 2px 2px #000;
border:1px solid rgba(0,0,0,.5);
}
.menu_button div{
background-color:#000000;
margin:4px auto;
border-radius:3px;
width:80%;
height:5px;
}
.menu_button:hover .menu_top{
display:block;
transition: all 0.3s linear 0s;
}
.menu_top{
display:none;
position:absolute;
}
.menu_top ul{
width:150px;
font-size:12px;
margin-top:-4px;
padding:0;
box-shadow:0 0 10px rgba(0,0,0, 1);
}
.menu_top ul li{
display:block;
margin:0;
width:100%;
border-right:1px solid rgba(0,0,0,0.5);
color:#FFFFFF;
}
.menu_top ul li:first-child{
border-top:1px solid rgba(0,0,0,.5);
border-radius:5px 5px 0 0;
}
.menu_top ul li:last-child{
border-bottom:1px solid rgba(0,0,0,.5);
border-radius:0 0 5px 5px;
}
.menu_top li a{
margin:0;
padding:3px;
}
.menu_top ul .active{
background:#9047DA;
border-top:1px solid rgba(0,0,0,.5);
}
}



html

<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">


<h2>Responsive menu</h2>
Try resizing your browser window.



<nav class="menu_button">
<div></div>
<div></div>
<div></div>


<div class="menu_top">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Java script</a></li>
<li class="active"><a href="#">Css</a></li>
<li><a href="#">Media queries</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
</nav>

</div>

</body>
</html>
Tags:
media queries


Search

Leave a comment

Fields with * are required
Your email address will not be displayed
5 + 1 =