Mobile navigation thingy

Developer
Teo Dragovic
Size
4,294 Kb
Views
6,072
  1. Mobile navigation thingy Previews
  2. Mobile navigation thingy HTML Codes
  3. Mobile navigation thingy CSS Codes
  4. Mobile navigation thingy JS Codes

How do I make an mobile navigation thingy?

Mobile-first type navigation using only CSS with JS fallback for IE8 if needed. When main menu is displayed content gets pushed down so it's visible while navigation is open.. What is a mobile navigation thingy? How do you make a mobile navigation thingy? This script and codes were developed by Teo Dragovic on 05 January 2023, Thursday.

Mobile navigation thingy Previews
IQ Test

Mobile navigation thingy - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mobile navigation thingy</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Open+Sans);
body { background-color: #8a8a8a; background-image: url(https://subtlepatterns.com/patterns/mochaGrunge.png); color: #F5F5F5; font-family: 'Open Sans', sans-serif; line-height: 1.4;
}
header { background-color: #383838;
}
header:after { display: table; clear: both; content: "";
}
h1 { position: relative; float: left; padding: 20px; font-size: 36px;
}
input { position: absolute; top: -99999px; left: -99999px; opacity: 0;
}
label { position: relative; float: right; margin: 20px; padding: 20px 10px; border-radius: 5px; background-color: #171717; font-size: 0; cursor: pointer;
}
label:hover, label:active { box-shadow: 0px 0px 4px #F5F5F5;
}
label .navicon { position: relative; width: 50px; height: 4px; border-radius: 4px; background-color: #F5F5F5;
}
label .navicon:before, label .navicon:after { position: absolute; display: block; width: 50px; height: 4px; border-radius: 4px; background-color: #F5F5F5; content: "";
}
label .navicon:before { top: -10px;
}
label .navicon:after { top: 10px;
}
nav { clear: both; overflow: hidden; max-height: 0; transition: max-height 1s ease;
}
nav a { display: block; padding: 20px; border-top: 1px solid #F5F5F5; color: #F5F5F5; text-decoration: none;
}
nav a:hover { background-color: #171717;
}
input[type=checkbox]:checked ~ nav,
.open { max-height: 300px;
}
article { padding: 20px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <header> <h1>Navigation Thingy</h1> <label for="navigation-toggle"> Display navigation <div class="navicon"></div> </label> <input type="checkbox" id="navigation-toggle" /> <nav role='navigation'> <a href="#">Home</a> <a href="#">About</a> <a href="#">Clients</a> <a href="#">Contact Us</a> </nav>
</header>
<article><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mobile navigation thingy - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body { background-color: #8a8a8a; background-image: url(https://subtlepatterns.com/patterns/mochaGrunge.png); color: #F5F5F5; font-family: 'Open Sans', sans-serif; line-height: 1.4;
}
header { background-color: #383838;
}
header:after { display: table; clear: both; content: "";
}
h1 { position: relative; float: left; padding: 20px; font-size: 36px;
}
input { position: absolute; top: -99999px; left: -99999px; opacity: 0;
}
label { position: relative; float: right; margin: 20px; padding: 20px 10px; border-radius: 5px; background-color: #171717; font-size: 0; cursor: pointer;
}
label:hover, label:active { box-shadow: 0px 0px 4px #F5F5F5;
}
label .navicon { position: relative; width: 50px; height: 4px; border-radius: 4px; background-color: #F5F5F5;
}
label .navicon:before, label .navicon:after { position: absolute; display: block; width: 50px; height: 4px; border-radius: 4px; background-color: #F5F5F5; content: "";
}
label .navicon:before { top: -10px;
}
label .navicon:after { top: 10px;
}
nav { clear: both; overflow: hidden; max-height: 0; transition: max-height 1s ease;
}
nav a { display: block; padding: 20px; border-top: 1px solid #F5F5F5; color: #F5F5F5; text-decoration: none;
}
nav a:hover { background-color: #171717;
}
input[type=checkbox]:checked ~ nav,
.open { max-height: 300px;
}
article { padding: 20px;
}

Mobile navigation thingy - Script Codes JS Codes

//fallback for IE 8
if ($("html").hasClass("ie")) { $("label").on( "click", function(){ $("nav").toggleClass("open"); });
};
Mobile navigation thingy - Script Codes
Mobile navigation thingy - Script Codes
Home Page Home
Developer Teo Dragovic
Username teodragovic
Uploaded January 05, 2023
Rating 3
Size 4,294 Kb
Views 6,072
Do you need developer help for Mobile navigation thingy?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Teo Dragovic (teodragovic) Script Codes
Name
Cube thingy
Annoying label thingy
A Pen by Teo Dragovic
Galaxy sky thingy
Cube thingy, now fully functional
Page load thingy
Responsive nav with submenus
Client logo done in css
Dice
3D letter thingy
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!