here is my nav,. how do i make the menu bar with three horizontal lines as a dro
ID: 3878782 • Letter: H
Question
here is my nav,. how do i make the menu bar with three horizontal lines as a drop down when on a small screen such as an iphone.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>About me</title>
</head>
<style>
body {
margin: 0;
background-color: #FAF7F4;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1E1E1E;
}
ul.topnav li {float: right;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #8D8D8D;}
ul.topnav li a.active {
background: #fd540b; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#fd540b, #f43e7f); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#fd540b, #f43e7f); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#fd540b, #f43e7f); /* For Firefox 3.6 to 15 */
background: linear-gradient(#fd540b, #f43e7f); /* Standard syntax (must be last) */
}
#content{
margin:0;
padding:0;
color: black;
}
#container{
}
p{
padding: 2%;
font-family: 'Alegreya Sans SC','Actor',"Comic Sans MS","Times New Roman", Times, serif;;
font-size: 22px;
float: left;
}
#topHeader{
padding: 10px;
text-align: center;
clear: both;
}
h1{
text-decoration: underline;
}
img{
margin-top: 2%;
max-height: 140;
max-width: 13%;
animation: fadein 6s;
}
@keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
@media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
}
</style>
<body>
<div id="container">
<nav>
<ul class="topnav">
<li><a href="#home">Contact</a></li>
<li><a href="#home">Resume</a></li>
<li><a href="#home">Dog</a></li>
<li><a href="#news">Food</a></li>
<li><a href="#contact">Coding Projects</a></li>
<li><a class="active" href="#home">About</a></li>
<li ><a href="#about">Home</a></li>
</ul>
</nav>
<div id="content">
<div id="topHeader">
<h1>About</h1>
<h3>Web Developer, Foodie and Dog Enthusiast</h3>
<img src="2017.jpg"class="img-rounded">
</div>
<div id="bContainer" align="center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget accumsan arcu.
Nam id lacus dolor. Cras sit amet nunc justo. Etiam scelerisque purus id nisi blandit, auctor faucibus sem congue.
Integer porta lorem sed nibh vestibulum feugiat.
Aliquam dignissim justo eu risus fermentum, pharetra auctor enim sagittis.
Nunc ornare massa libero, at dictum lorem facilisis vitae. Quisque tempor nisi et ultricies mattis. Phasellus sodales imperdiet urna vel fringilla. Sed enim lectus, auctor et est ut, mattis vehicula est. Duis finibus porta porta. In hac habitasse platea dictumst. Fusce nec eros faucibus felis facilisis dignissim. Quisque ac sapien commodo purus commodo volutpat. Nulla ipsum lorem, accumsan quis commodo id, porttitor in erat. Aenean viverra non diam eu auctor.</p>
</div>
</div>
</div>
</body>
</html>
Explanation / Answer
HTML CODE..
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Only Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">About ￬</a>
<ul class="hidden">
<li><a href="#">Who We Are</a></li>
<li><a href="#">What We Do</a></li>
</ul>
</li>
<li>
<a href="#">Portfolio ￬</a>
<ul class="hidden">
<li><a href="#">Photography</a></li>
<li><a href="#">Web & User Interface Design</a></li>
<li><a href="#">Illustration</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
CSS CODE...
Strip the ul of padding and list styling
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
*Create a horizontal list with spacing*
li {
display:inline-block;
float: left;
margin-right: 1px;
}
*Style for menu links*
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
*Hover state for top level links*
li:hover a {
background: #19c589;
}
*Style for dropdown links*
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
*Hover state for dropdown links*
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
*Hide dropdown links until they are needed*
li ul {
display: none;
}
*Make dropdown links vertical*
li ul li {
display: block;
float: none;
}
*Prevent text wrapping*
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
*Display the dropdown on hover*
ul li a:hover + .hidden, .hidden:hover
{
display: block;
}
*Style 'show menu' label button and hide it by default*
.show-menu
{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
*Hide checkbox*
input[type=checkbox]
{
display: none;
}
*Show menu when invisible checkbox is checked*
input[type=checkbox]:checked ~ #menu{
display: block;
}
*Responsive Styles*
@media screen and (max-width : 760px)
{
*Make dropdown links appear inline*
ul {
position: static;
display: none;
}
*Create vertical spacing*
li {
margin-bottom: 1px;
}
*Make all menu links full width*
ul li, li a {
width: 100%;
}
*Display 'show menu' link*
.show-menu {
display:block;
}
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.