Skip to content

Instantly share code, notes, and snippets.

@ScribbleGhost

ScribbleGhost/Mobile menu CSS example template.html

Last active September 12, 2019 15:14
Show Gist options
  • Save ScribbleGhost/0df9cd831ab2390ea503f0f97fd162f7 to your computer and use it in GitHub Desktop.
Save ScribbleGhost/0df9cd831ab2390ea503f0f97fd162f7 to your computer and use it in GitHub Desktop.
Download ZIP
A super simple hamburger-menu-drop-down-menu for responsive web design
Raw
Mobile menu CSS example template.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900" rel="stylesheet">
<style>
/*Demo purposes styling only*/
body { font-family: 'Lora', serif; line-height: 1.8; font-size: 1.2em; }
h1, h2, h3, h4, h5, h6 { font-size: 150%; font-family: 'Heebo', sans-serif; padding-top: 1em; padding-left: 5%; padding-right: 5%; margin: 0; }
p { padding-left: 5%; padding-right: 5%; }
/*---------------------------*/
.site-header {
margin: auto;
border-radius: 10px;
}
.topnav {
overflow: hidden;
position: relative;
line-height: 0;
}
.topnav #menu-content {
display: none;
box-shadow: inset 1px 3px 5px -4px rgba(0, 0, 0, 0.37);
border-bottom: 1px solid #ececec;
padding: 1em;
font-family: 'Heebo', sans-serif;
font-style: italic;
font-size: 14px;
line-height: 2;
}
.topnav #search-content {
display: none;
box-shadow: inset 1px 3px 5px -4px rgba(0, 0, 0, 0.37);
border-bottom: 1px solid #ececec;
padding: 1em;
font-family: 'Heebo', sans-serif;
font-style: italic;
font-size: 14px;
line-height: 2;
}
#search-content input {
height: 100%;
width: calc(100% - 2em);
padding: 1em;
border: none;
background-color: rgba(0, 0, 0, 0.02);
border-radius: .4em;
margin: 0 0 1em 0;
}
.topnav a {
color: black;
text-decoration: none;
font-size: 17px;
}
.topnav button.menu-icon {
display: block;
position: absolute;
right: 0;
top: 0;
height: 50px;
width: 50px;
padding: 0;
background-color: rgba(255, 170, 255, 0.8);
border: none;
cursor: pointer;
}
.topnav button.search-icon {
display: block;
position: absolute;
right: 50px;
top: 0;
height: 50px;
width: 50px;
padding: 0;
background-color: rgba(170, 255, 170, 0.8);
border: none;
cursor: pointer;
}
.topnav button:hover,
.topnav a:hover {
background-color: lightblue;
color: black;
}
.active {
color: white;
}
a.logo {
width: 50px;
padding: 0;
height: 50px;
display: inline-block;
}
.logo-text {
width: calc(100% - 150px);
height: 50px;
display: inline-block;
position: absolute;
text-align: center;
left: 50px;
line-height: 2.5;
}
.logo-img {
height: 40px;
width: 40px;
padding-left: 5px;
padding-top: 5px;
}
.site-content {
box-shadow: inset 1px 3px 5px -4px rgba(0, 0, 0, 0.37);
}
</style>
</head>
<body>
<div id="page" class="site">
<div id="masthead" class="site-header">
<div class="topnav">
<a href="test.html" class="logo active"><img src="https://i.imgur.com/7tKqURG.png" class="logo-img"></a>
<span class="logo-text"><a href="#">This is a page</a></span>
<div id="menu-content">
<span>
The content of your menu should go here. You can place anything here really. This is just a span but it could be anything. The content of your menu should go here. You can place anything here really. This is just a span but it could be anything. The content of your menu should go here. You can place anything here really. This is just a span but it could be anything.
</span>
</div>
<div id="search-content">
<span>
<input type="text" placeholder="Search..."> This is the content of the search bar...
</span>
</div>
<button href="javascript:void(0);" class="search-icon" onclick="searchtoggle()">
<i class="fa fa-search search-button-icon"></i>
</button>
<button href="javascript:void(0);" class="menu-icon" onclick="menutoggle()">
<i class="fa fa-bars menu-button-icon"></i>
</button>
</div>
</div>
<div id="content" class="site-content">
<h3>Vertical Mobile Navbar</h3>
<p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
<p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
<p>The first menu icon on the right are positioned with: <code>position: absolute; right: 0; top: 0;</code></p>
<p>The next search icon is positioned with: <code>position: absolute; right: 50px; top: 0;</code></p>
<h3>To-do list</h3>
<ul>
<li>How can I focus on the input searchbar when the search icon is clicked?</li>
<li>How can I use only the two Font awesome icons instead of the whole shebang?</li>
</ul>
<h3>Rules</h3>
<ul style="font-weight: bold;">
<li>No jQuery ✔</li>
<li>Internet Explorer 11 support 🤮 ✔</li>
</ul>
</div>
<script>
function menutoggle()
{
// Show search content if search is clicked
var x = document.getElementById("menu-content");
if (x.style.display === "block")
{ x.style.display = "none"; }
else
{ x.style.display = "block"; }
// Close menu if it is open when seach is clicked
var x = document.getElementById("search-content");
if (x.style.display === "block")
{ x.style.display = "none"; }
else
{ x.style.display = "none"; }
}
</script>
<script>
function searchtoggle()
{
// Show search content if search is clicked
var x = document.getElementById("search-content");
if (x.style.display === "block")
{ x.style.display = "none"; }
else
{ x.style.display = "block"; }
// Close menu if it is open when seach is clicked
var x = document.getElementById("menu-content");
if (x.style.display === "block")
{ x.style.display = "none"; }
else
{ x.style.display = "none"; }
}
</script>
</div>
</body>
</html>
@ScribbleGhost
Copy link
Author

Version 1.1 preview here

https://i.imgur.com/wfCBk64.png

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment