I want to use the Highlights template from HTML5 up, but I want to add a navigation bar similar to the one from a different template, for example like this menu one that floats, and rolls when clicked on.
I've looked into the HTML,CSS and JSCRIPT and to try and adapt the first template with the navigation bar, as well as investigate different options in SO with no success.
The two templates use different approaches in their html, the highlights template structure uses <div class="container"> in the header, while the other one uses <body class="landing"> ,<div id="page-wrapper">.
Is that feasible?
This is what I've tried:
HTML
...
<style>
.floating-menu {
font-family: sans-serif;
background: transparent;
padding: 5px; width: 130px;
z-index: 10000;
position: fixed;
}
.floating-menu a, .floating-menu h3 {
font-size: 0.8em;
display: block;
margin: 0 0.5em;
color: white;
}
</style>
</head>
<body>
<nav class="floating-menu">
<div id="nav-toggle">
<span></span><span></span><span></span>
<div class="menu-caption">
</div>
</div>
<div id="nav" class="nav-collapse collapse">
<ul>
<li>Home</li>
<li>Who I am</li>
<li>Stuff I do</li>
</ul>
</div>
</nav>
CSS:
/* nav */
#nav > ul {
margin: 0;
display:block
}
#nav > ul > li {
position: relative;
display: inline-block;
margin-left: 0em;
}
#nav > ul > li a {
color: #c0c0c0;
text-decoration: none;
border: 0;
display: block;
padding:0em 0em;
}
#nav > ul > li:first-child {
margin-left: 0;
}
#nav > ul > li:hover a {
color: #fff;
}
#nav > ul > li.current {
font-weight: 400;
}
#nav > ul > li.present {
font-weight: 400;
}
#nav > ul > li.present:before {
-moz-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
transform: rotateZ(45deg);
width: 0.75em;
height: 0.75em;
content:'';
display: block;
position: absolute;
bottom: -0.5em;
left: 50%;
margin-left: -0.375em;
background-color: #37c0fb;
}
#nav > ul > li.present a {
color: #fff;
}
#nav > ul > li.active a {
color: #fff;
}
#nav > ul > li.active.present:before {
opacity: 0;
}
#nav {
cursor: default;
background-color: #333;
padding: 0;
text-align: left;
}
#nav-toggle {
background-color: #transparent;
cursor: pointer;
display:block;
}
#nav-toggle > a {
float:left;
color:#fff;
padding:0px;
width: 0px;
}
#nav-toggle > a > span {
width:26px;
height:2px;
background-color:#fff;
display:block;
}
#nav-toggle > a > span + span {
margin-top:4px;
}
#nav > ul {
display:none;
}
#nav > ul > li {
display: block;
}
.menu-caption {
display:inline-block;
color:#fff;
padding:10px;
}
#media screen and (max-width:767px) {
#nav-toggle {
display:block;
}
#nav > ul {
display:none;
}
#nav > ul > li {
display: block;
}
}
JS
$(function() {
var windowWidth = $(window).width();
$("#nav-toggle").click(function () {
$("#nav ul").slideToggle();
$("#nav ul").toggleClass("open");
});
var navMain = $("#nav");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
$(window).resize(function () {
windowWidth = $(window).width();
if (windowWidth < 767) {
if ($("#nav ul").is(":hidden")) {
$("#nav ul").css("display","block");
}
}
else {
$("#nav ul").css("display","none");
}
});
But this has a strange behavior that the menu doesn't fold back after an item was selected...
To illustrate, in the Spectral index.html file add this in the <head> section below the other CSS links. This should give you a good starting point to what you want.
<style>
#one, #two, #three, #cta, #footer, .wrapper > .inner {
margin: 0 auto;
width: 50%;
}
</style>
I would suggest making these changes in the actual CSS file afterwards though.
For responsiveness you can setup media queries using the below syntax in your CSS file to adjust the width of the section's to fill the width of the page when in mobile view.
#media(max-width: 767px){
#one, #two, #three, #cta, #footer, .wrapper > .inner {
margin: 0 auto;
width: 100%;
}
}
Related
function myFunction() {
var x = document.getElementById("primaryNavigation");
if (x.className === "show") {
x.className = "hide";
} else {
x.className = "show";
}
}
/* NAVIGATION - MENU */
nav {
background-color: #0000ff;
}
nav button {
display: block;
position: absolute;
top: .5rem;
right: 2%;
}
nav ul {
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
}
nav ul.show {
display: flex;
}
nav ul.hide {
display: none;
}
nav ul li {
width: 100%;
list-style: none;
}
nav ul li a {
display: block;
color: white;
text-decoration: none;
font-size: 1.1rem;
font-weight: 450;
padding: 1rem 0;
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
nav ul li.active a {
background-color: #f52c39;
}
nav ul li a:hover {
background-color: #4c9bff;
}
.clearfix:after,
.row:after {
content: "";
display: table;
clear: both;
}
/* DROP DOWN MENU */
ul ul {
position: absolute;
display: none;
background-color: #0000ff;
}
li:hover ul {
display: block;
background-color: #0000ff;
}
nav ul ul li a:hover {
background-color: #4c9bff;
}
<nav class="clearfix">
<button onclick="myFunction()">☰</button>
<ul class="hide" id="primaryNavigation">
<li class="active">Home</li>
<li>Adventures
<ul>
<li>White Water Rafting</li>
<li>Hiking & Zipline</li>
<li>Camping</li>
</ul>
</li>
<li>Guides</li>
<li>Booking</li>
<li>Contact</li>
</ul>
</nav>
I want my dropdown menu to be the same width as the parent. (FYI: It is responsive and changes into a hamburger). I realize this is probably so easy for someone (but I'm just learning). I've tried all the solutions I've seen listed here and other place to no avail. THANK YOU for any help.
I'm posting here to get some help.
I'm trying to make a simple dropdown menu and I'm stacked with the submenus (limpieza and balance).
What i'm trying to achieve here is to make the limpieza and balance buttons have the same width and text align as the rest of the buttons. I just dont know how. It looks like once the relative attribute is added to the container and the absolute attribute is added to limpieza and balance, I can't control their width or text align anymore. I guess is bc they are out of its cointainer. I'm really confused here since this is the first time I try css.
I would appreciate if some1 could provide some help.
Here is the code.
#charset "utf-8";
/* CSS Document */
*{
margin: 0px;
padding: 0px;
}
body {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
}
/*ESTILOS GENERALES*/
.header {
left: 0;
position: fixed;
top: 0;
width: 100%;
background:white;
}
.barrasup {
background:#203c6e;
padding-top: 10px;
padding-bottom: 10px;
min-height: 29px;
z-index: 2;
}
.contenedor {
margin: 0 auto;
max-width: 1200px;
}
.social {
background: #203c6e;
display: block;
float: none;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
width: 75px;
}
.instasocsup {
margin-right: 10px
}
/*MENU*/
.barrainf {
margin-top: 10px;
}
.menu {
width: 1180px;
margin-left: auto;
margin-right: auto;
}
.menu ul {
list-style:none;
padding: 0;
}
.menu li {
line-height: 2.5rem;
position: relative;
}
.menu li .item2 ul {
position: absolute;
}
.menu > ul > li > div > a {
text-decoration:none;
color: black;
display: block;
}
.menu > ul > li > div > a:hover {
color: white;
background: #203c6e;
}
.menu > ul > li > div > a {
text-decoration:none;
color: black;
display: block;
}
.menu > ul > li > div > a:hover {
color: white;
background: #203c6e;
}
.menu > ul > li > div > ul > li >div > a {
text-decoration:none;
color: white;
display: block;
}
.menu li ul {
display: none;
}
.menu li:hover ul {
display:block;
}
.item1 {
margin-left: 10px;
margin-right: 10px;
background: white;
}
.item2, .item3, .item4, .item5 {
margin-left: 0px;
margin-right: 10px;
background:white;
}
.subitem1, .subitem2 {
margin-left: 0px;
background: #203C6E;
color: white;
}
/*1ER NIVEL*/
.menu > ul{
background: #DF2529;
display: table;
width:100%;
}
.menu > ul > li {
float: left;
width: 20%;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link href="css/styleIndigo.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="barrasup">
<div class="contenedor">
<div class="social">
<img src="Instagram_logo.png"></img>
<img src="twitter_logo.png"></img>
</div>
</div>
</div>
<div class="barrainf">
<div class="menu">
<ul>
<li><div class="item1">Inicio</div></li>
<li><div class="item2">Comprar
<ul>
<li id="listamenu"><div class="subitem1">Balance</div></li>
<li id="listamenu"><div class="subitem2">Limpieza</div></li>
</ul>
</div></li>
<li><div class="item3">Blog</div></li>
<li><div class="item4">Quienes somos</div></li>
<li><div class="item5">Contacto</div></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Just use calculate css for width that works with inherited table display properties. View it here http://codepen.io/anon/pen/reMpRj
.menu > ul > li > div > ul {
width: calc(100% - 10px);
}
I have converted a horizontal navigation to vertical responsive navigation, but when you open the responsive navigation top level (ul li) by klicking on 'Menu', ul li has too much height (see the gray area underneath the top level) and the last menue point in the next level disappears
(Menu 1 should have 7 sub level menue points ul li ul li a's, Menu 2 should have 5 and Menu 3 should have 3) .
I figured it out that is has to do with the following CSS from the desktop version but don't know how to get rid of the problem:
ul.topNav li ul {
display: none;
**position: absolute;
top: 2.3rem;**
background-color: rgb(245, 245, 245);
}
Tried a lot but nothing worked out. Below you find all code and the link to make it run and see the result. Don't forget to resize your window between 320 and 979px and maybe reload to be sure it works.
function init() {
var ww = document.body.clientWidth;
var mobileLayout = ww <= 1024;
if (mobileLayout) {
/* show topNav */
$("#menuIcon").click(function () {
$("#topNavResp").fadeToggle(100);
});
/* show topNav second level and close all others */
$('.topNavLi').on('click', function (event) {
event.preventDefault();
$(this).next('ul').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
} else {
alert('please reduce/shrink your window and reload');
}
}
html {
font-size: 15px;
background-color: rgba(227, 227, 227, 1);
}
ol, ul, li {
list-style-type: none;
}
a {
text-decoration: none;
}
/* ------------------- TOP NAV BAR ------------------------------------------ */
#headerNavBar {
width: 100%;
height: 2.4rem;
line-height: 2.4rem;
display: block;
background-color: #D3D3D3;
*zoom: 1;
}
ul.topNav {
float: right;
width: 75%;
height: 2.3rem;
position: relative;
z-index: 10;
}
ul.topNav > li {
line-height: 2.3rem;
float: left;
width: auto;
position: relative;
}
ul.topNav li a.topNavLi {
height: 2.3rem;
float: left;
padding: 0 10.3%;
}
ul.topNav li a:hover.topNavLi,
ul.topNav li:active a.topNavLi,
ul.topNav li:hover a.topNavLi {
border-bottom: 0.13rem solid #e23427;
color: #e23427;
}
/* ------------------- TOP NAV 2nd LEVEL------------------------------------- */
ul.topNav li ul {
display: none;
position: absolute;
top: 2.3rem;
background-color: rgb(245, 245, 245);
}
ul.topNav li ul li {
float: none;
display: block;
}
ul.topNav li ul li a {
display: block;
color: #231f20;
}
ul.topNav li ul li:hover,
ul.topNav li ul li:active {
background-color: rgb(227, 33, 33);
}
ul.topNav li ul li:hover a,
ul.topNav li ul li:active a {
color: #fff;
}
/**************************************************************************** */
/**************************************************************************** */
#media only screen and (min-width: 320px) and (max-width: 979px)
{
body {
width: 95%;
margin: 0 auto;
}
#wrapper {
width: 100%;
}
#pageHead {
width: 100%;
}
/* ------------------- NAVI Responsive --------------------------------- */
#headerNavBar {
height: 2.9rem;
line-height: 2.9rem;
position: relative;
}
#menuIcon {
display: block;
position: absolute;
top: 0;
right: 0;
padding: 0.3rem 1rem 0 0;
}
ul.topNav {
display: none;
float: none;
width: 100%;
position: absolute;
top: 2.9rem;
}
.topNav > li {
width: 100% !important;
background-color: #D3D3D3;
display: block;
position: static;
border-bottom: 1px solid #FFF;
}
ul#topNavResp.topNav li a.topNavLi,
ul#topNavResp.topNav li ul li a {
width: 100%;
}
ul.topNav li a:hover.topNavLi,
ul.topNav li:active a.topNavLi,
ul.topNav li:hover a.topNavLi {
border: none;
}
/* ------------------- TOP NAV Responsive 2nd LEVEL ------------------------- */
ul.topNav li ul {
display: none;
width: 100%;
position: static;
padding-left: 10.3%;
background-color: rgb(245, 245, 245);
}
ul.topNav li ul li {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body onload="init();">
<div id="wrapper">
<div id="pageHead">
<nav id="headerNavBar">
MENU
<ul class="topNav" id="topNavResp">
<li>
Menu 1
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55555</li>
<li>66666</li>
<li>77777</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55555</li>
</ul>
</li>
<li>
Menu 3
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
</ul>
</li>
</ul>
</nav><!-- end topNav -->
</div>
</div><!-- end wrapper -->
</body>
</html>
Change the rule:
#media only screen and (max-width: 979px) and (min-width: 320px){
ul.topNav li ul {
...
position: inherit;
}
}
To:
#media only screen and (max-width: 979px) and (min-width: 320px){
ul.topNav li ul {
...
position: static;
}
}
I am displaying PDF file in a jsp page. I want to display menu bar at the top on the same page. I have written code to display menu bar as well as to display PDF file. But the menu bar is not visible on the page. Menu bar is covered up the PDF file. How to make menu bar visible? Please help. Thank you.
<style>
body
{
background:url('C:\\Users\\workspace3\\elearning\\openbook.jpg') no-repeat center center fixed;
background-size: cover;
margin: 0;
padding: 0;
}
div ul ul {
display: none;
}
div ul li:hover > ul {
display: block;
}
div ul {
background: #7c0c0c;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-shadow: 3px 2px 3px #333333;
list-style: none;
position: relative;
}
div ul:after {
content: ""; clear: both; display: block;
}
div ul li {
float: left;
}
div ul li:hover {
background: #ebd3d3;
}
div ul li:hover a {
color: #4f9dd5;
}
div ul li a {
display: block; padding: 25px 30px;
color:#ebd3d3; text-decoration: none;
}
div ul ul {
background:#7c0c0c; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
div ul ul li {
float: none;
border-top: 1px solid #4f9dd5;
border-bottom: 1px solid #4f9dd5;
position: relative;
}
div ul ul li a {
padding: 15px 40px;
color: #ebd3d3;
}
</style>
<body>
<div>
<ul>
<li><span>Content</span>
<ul>
<li><span>Text Content</span></li>
<li><span>Video</span></li>
<li><span>PPT</span></li>
</ul></li>
<li><span>Quiz</span></li>
<li><span>Assignment</span>
<ul>
<li><span>Assignment Questions</span></li>
<li><span>Upload Assignment</span></li>
</ul></li>
<li> <span>Forum</span></li>
<li> <span>Logout</span></li>
</font></ul></div>
<%
File temp=new File("C:\\Users\\Desktop\\content\\o.pdf");
response.setHeader("Content-Disposition", "attachement; filename=\""+temp+"\"");
InputStream isStream = null;
ServletOutputStream sosStream = null;
try
{
response.flushBuffer();
isStream =new FileInputStream(temp);
sosStream =response.getOutputStream();
int ibit = 250;
while ((ibit) >= 0)
{
ibit = isStream.read();
sosStream.write(ibit)
}
}catch (IOException e)
{
out.println(e);
}
sosStream.flush();
sosStream.close();
isStream.close();%>
</body>
</html>
am having a problem getting multiple levels working on a responsive css menu, the base of the menu i have followed this tutorial on tuts.com
I need more than 2 sub levels on this menu for my site, though when i add the extra 's to the html, the extra level is not working as it should, am sure its possible to add an extra level to the original menu, but i cant figure out what extra css i need, i had tried adding extra css code for li li li li but thats not working for me.
the extra level displays wwith the 2nd sublevel, where it should only display for the hover of the 2nd sub-menu.
i have created a jsfiddle (my first one) here: http://jsfiddle.net/DizzyHigh/Bpubu/4/
html:
<div id="left_container"></div>
<div class="container">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li class="test"> HOME
</li>
<li> LOCATIONS
<ul class="nav">
<li> Boroughs
<ul class="nav">
<li> Enfield
<ul>
<li>E-Locations
</li>
<li>E-Unit Bases
</li>
<li>E-Parking
</li>
</ul>
</li>
<li> Barnet
<ul>
<li>B-Locations
</li>
<li>B-Unit Bases
</li>
<li>B-Parking
</li>
</ul>
</li>
</ul>
</li>
<li> Maps
<ul class="nav">
<li> Enfield map
<ul>
<li>ME-Locations
</li>
<li>ME-Unit Bases
</li>
<li>ME-Parking
</li>
</ul>
</li>
<li> Barnet Map
<ul>
<li>MB-Locations
</li>
<li>MB-Unit Bases
</li>
<li>MB-Parking
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li> CONTACT
</li>
<li> LINKS
</li>
</ul>
</div>
<div id="right_container"> </div>
css:
body, nav, ul, li, a {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.container {
width: 90%;
max-width: 900px;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:#175e4c;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
}
.nav > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #1d7a62;
position: relative;
z-index:100;
border-top: 1px solid #175e4c;
}
.nav li li li a {
background:#249578;
z-index:200;
border-top: 1px solid #1d7a62;
}
#media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
}
JS:
$(document).ready(function() {
var ww = document.body.clientWidth;
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
adjustMenu();
var adjustMenu = function() {
if (ww < 768) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
}
else if (ww >= 768) {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind('click');
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
}
}
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
})
can any css gurus point me in the right direction?
Bryn try the follwing code:
I use 'NormalMenu' class for css hover event on normal menu
Java Script
var adjustMenu = function() {
if (ww < 768) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$('.nav').removeClass('NormalMenu').find('ul').hide();
$(".nav li a").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
var _sub = $(this).siblings('ul')
if($(_sub).is(':visible')){
$(_sub).hide();
$(_sub).find('ul').hide();
}else{
$(_sub).show();
}
});
}
else if (ww >= 768) {
$(".toggleMenu").css("display", "none");
$(".nav li a").unbind('click');
$(".nav").show().addClass('NormalMenu').find('ul').removeAttr('style');
}
}
CSS
body, nav, ul, li, a {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.container {
width: 90%;
max-width: 900px;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:#175e4c;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
}
.nav > li > .parent {
/* background-image: url("images/downArrow.png");*/
background-repeat: no-repeat;
background-position: right;
}
ul.NormalMenu ul{
width: 100%;
display:none;
position: absolute;
}
ul.NormalMenu li{
line-height:40px;
}
ul.NormalMenu li:hover > ul{
width: 100%;
display:block;
left:0;
}
ul.nav ul li{
background: #1d7a62;
}
ul.NormalMenu li li:hover> ul{
width: 100%;
display:block;
top:0;
left:100%;
}
ul.nav ul li li{
background: #1d7a00;
}
#media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
/*background-image: url("images/downArrow.png");*/
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.nav ul{
margin-left:5%;
width: 95%;
}
ul.nav li{
line-height:30px;
}
}
See Demo: http://jsfiddle.net/ducwidget/Bpubu/21/
you can check this out ...I have made this menu in Plain html5 and css https://github.com/Saransh27/Dashboard. You can always extend it to you needs and let me know if you have any questions.