Hidden Push Nav with Flyouts

Developer
EY-Intuitive
Size
3,948 Kb
Views
4,048
  1. Hidden Push Nav with Flyouts Previews
  2. Hidden Push Nav with Flyouts HTML Codes
  3. Hidden Push Nav with Flyouts CSS Codes
  4. Hidden Push Nav with Flyouts JS Codes

How do I make an hidden push nav with flyouts?

Got challenged by one of our Designers to make this happen. Pretty cool menu idea, nice result.. What is a hidden push nav with flyouts? How do you make a hidden push nav with flyouts? This script and codes were developed by EY-Intuitive on 17 January 2023, Tuesday.

Hidden Push Nav with Flyouts Previews
IQ Test

Hidden Push Nav with Flyouts - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hidden Push Nav with Flyouts</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! */ html,
body { height: 100%; font-family: Inconsolata, sans-serif;
}
* { box-sizing: border-box;
}
.wrapper { overflow-x: hidden;
}
.container { position: relative; transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.container.active { transform: translateX(200px);
}
nav { height: 100%; position: absolute; top: 0; left: -200px; width: 200px; overflow-y: scroll; background-color: #3498db;
}
nav .main-ul { margin-top: 100px; position: relative;
}
nav .main-ul li { color: #8bc4ea; padding: 20px; font-size: 20px;
}
nav .main-ul li:hover { background-color: #217dbb;
}
nav .main-ul li:hover .flyout { display: block;
}
nav .main-ul li .flyout { box-shadow: 2px 0 4px 0 rgba(0, 0, 0, 0.2); display: none; background-color: white; position: fixed; top: 100px; left: 0; z-index: 100; width: 200px; max-height: 280px; overflow-y: scroll;
}
nav .main-ul li .flyout li { color: black; position: relative;
}
nav .main-ul li .flyout li:hover { background-color: #bdc3c7; color: white;
}
section { background-color: #2980b9; position: relative; padding-top: 80px;
}
section > div { width: 70%; background-color: white; margin: 10px auto; height: 200px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}
header { background-color: #164666; padding: 10px 20px; position: fixed; z-index: 10; width: 100%; top: 0; left: 0;
}
button { display: block; font-family: Inconsolata, sans-serif; background: #2980b9; border: 2px solid white; outline: none; color: white; font-size: 20px; padding: 10px 20px; border-radius: 3px; cursor: pointer; margin: 0 auto;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrapper">
<div class="container"> <nav role='navigation'> <ul class="main-ul"> <li> Home <ul class="flyout"> <li>Text one</li> <li>Text two</li> <li>Text three</li> <li>Text four</li> </ul> </li> <li> About <ul class="flyout"> <li>Text one</li> <li>Text two</li> </ul> </li> <li> Clients <ul class="flyout"> <li>Text one</li> <li>Text two</li> <li>Text three</li> <li>Text four</li> <li>Text five</li> <li>Text six</li> <li>Text seven</li> <li>Text eight</li> <li>Text nine</li> <li>Text ten</li> <li>Text eleven</li> <li>Text twelve</li> </ul> </li> <li> Contact Us <ul class="flyout"> <li>Text one</li> <li>Text two</li> <li>Text three</li> <li>Text four</li> </ul> </li> <li>Home</li> <li>About</li> <li>Clients</li> <li>Contact Us</li> <li>Home</li> <li>About</li> <li>Clients</li> <li>Contact Us</li> <li>Home</li> <li>About</li> <li>Clients</li> <li>Contact Us</li> </ul> </nav> <header> <button>Toggle Menu</button> </header> <section> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </section>
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hidden Push Nav with Flyouts - Script Codes CSS Codes

html,
body { height: 100%; font-family: Inconsolata, sans-serif;
}
* { box-sizing: border-box;
}
.wrapper { overflow-x: hidden;
}
.container { position: relative; transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.container.active { transform: translateX(200px);
}
nav { height: 100%; position: absolute; top: 0; left: -200px; width: 200px; overflow-y: scroll; background-color: #3498db;
}
nav .main-ul { margin-top: 100px; position: relative;
}
nav .main-ul li { color: #8bc4ea; padding: 20px; font-size: 20px;
}
nav .main-ul li:hover { background-color: #217dbb;
}
nav .main-ul li:hover .flyout { display: block;
}
nav .main-ul li .flyout { box-shadow: 2px 0 4px 0 rgba(0, 0, 0, 0.2); display: none; background-color: white; position: fixed; top: 100px; left: 0; z-index: 100; width: 200px; max-height: 280px; overflow-y: scroll;
}
nav .main-ul li .flyout li { color: black; position: relative;
}
nav .main-ul li .flyout li:hover { background-color: #bdc3c7; color: white;
}
section { background-color: #2980b9; position: relative; padding-top: 80px;
}
section > div { width: 70%; background-color: white; margin: 10px auto; height: 200px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}
header { background-color: #164666; padding: 10px 20px; position: fixed; z-index: 10; width: 100%; top: 0; left: 0;
}
button { display: block; font-family: Inconsolata, sans-serif; background: #2980b9; border: 2px solid white; outline: none; color: white; font-size: 20px; padding: 10px 20px; border-radius: 3px; cursor: pointer; margin: 0 auto;
}

Hidden Push Nav with Flyouts - Script Codes JS Codes

$('button').click(function(){ $('.container').toggleClass('active');
});
Hidden Push Nav with Flyouts - Script Codes
Hidden Push Nav with Flyouts - Script Codes
Home Page Home
Developer EY-Intuitive
Username ey_intuitive
Uploaded January 17, 2023
Rating 3
Size 3,948 Kb
Views 4,048
Do you need developer help for Hidden Push Nav with Flyouts?

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!

EY-Intuitive (ey_intuitive) Script Codes
Name
Step Indicator
Button Text Color Accessibility Mixin Test
Xbox One Achievement Unlocked Alert
Reading Interaction
Draggable Timeline Demo
Jquery Flyout Navigation
Progress Button Animation
Awesome Full Page Menu Nav
UI Color Shade Previewer
A Pen by EY-Intuitive
Create amazing love letters 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!