We Keep Coding

Fullscreen Overlay Navigation with 2nd Level

I am trying to create a fullscreen navigation overlay with 2 levels of navigation.
Currently I have managed to build the fullscreen overlay along with the level 1 navigation.
https://codepen.io/anon/pen/rJJGKE
$(document).ready(function() {
$(".menu-btn a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
$('.menu a').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
});
/* OPEN / CLOSE BTNS */
.menu-btn {
z-index: 999;
display: inline;
font-size: 32px;
}
.menu-btn a {
display: inline-block;
text-decoration: none;
/* safari hack */
}
.btn-open:after {
color: #000;
content: "\f394";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.btn-open:hover:after {
color: #000;
}
.btn-close:after {
color: #000;
content: "\f2d7";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.btn-close:hover:after {
color: #000;
}
/* OVERLAY */
.overlay {
position: fixed;
top: 0;
z-index: 99;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: rgba(135, 119, 116, 0.95);
}
.overlay .menu {
margin: 100px auto;
width: 80%;
}
.overlay .menu ul {
margin: 0;
padding: 0;
width: 100%;
}
.overlay .menu ul li {
float: left;
padding: 6px 0 0 0;
width: 100%;
list-style: none;
text-align: left;
text-transform: uppercase;
margin-bottom: 40px;
}
.overlay .menu ul li#social {
width: 100%;
margin-top: 50px;
}
.overlay .menu ul li a {
color: #d1b400;
font-weight: 300;
font-size: 20px;
font-family: 'Old Standard TT', serif;
}
.overlay .menu ul li#social a {}
.overlay .menu ul ul {
margin-top: 10px;
}
.overlay .menu ul ul li {
position: relative;
float: none;
margin: 0;
width: 100%;
border: 0;
}
.overlay .menu ul ul li a {
color: #000;
text-transform: capitalize;
font-weight: 300;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
}
.overlay .menu ul ul li a:hover {
color: #34b484;
}
/* RESPONSIVE */
#media screen and (max-width: 768px) {
.overlay .menu ul li {
float: none;
margin-bottom: 25px;
width: 100%;
}
.overlay .menu ul li:last-child {
border: 0;
}
.overlay .menu ul ul {
margin-top: 20px;
}
.menu-btn {
right: 25px;
}
}
.allexamples {
position: absolute;
bottom: 0;
font-size: 18px;
font-weight: bold;
width: 100%;
text-align: center;
background: #e9e9e9;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #333;
position: fixed;
}
.menu-social {
display: inline-block;
margin: 0 .4em;
}
.menu-social a {
width: 44px;
height: 44px;
padding: 0;
background-image: url("../img/cd-socials.svg");
background-repeat: no-repeat;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.menu-social .menu-facebook a {
background-position: 0 0;
}
.menu-social .menu-instagram a {
background-position: -44px 0;
}
.menu-social .menu-dribbble a {
background-position: -88px 0;
}
.menu-social .menu-twitter a {
background-position: -132px 0;
}
.overlay .menu ul ul li.description {
padding: 0px 0 10px 0px;
}
.overlay .menu ul ul li.description span {
color: #c3bab9;
font-size: 13px;
font-weight: 300;
text-transform: none;
}
p.tel,
p.email {
margin: 0 0 3px 0;
}
p.tel a {
font-family: 'Open Sans', sans-serif!important;
color: #000!important;
font-weight: 600!important;
font-size: 18px!important;
letter-spacing: 1px;
}
p.email a {
font-family: 'Open Sans', sans-serif!important;
color: #000!important;
font-weight: 300!important;
font-size: 16px!important;
text-transform: none;
}
.menu-btn a span {
font-size: 18px;
color: #000000;
line-height: 18px;
font-weight: 600;
position: relative;
top: -5px;
right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav class="navbar fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Logo
<img src="" width="30" height="30" alt="">
</a>
<span class="navbar-text">
<div class="menu-btn">
<a class="btn-open" href="javascript:void(0)"><span>MENU</span></a>
</div>
</span>
</div>
</nav>
</header>
<div class="overlay">
<div class="menu">
<div class="container">
<ul>
<li>
Menu
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Work</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
What i am looking to do now is: When a user clicks on services, instead of going to services page, i would like a second level menu to appear (service 1, service 2 etc) in the same place as the existing menu.
Would this require a jQuery solution? Any help would be appreciate.

Yeah, I think a simple jQuery function in combination with some CSS would be the best solution:
$('.menu a').on('click', function () {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
// I added this line
$(this).next('.sub').toggleClass('visible');
});
.overlay .menu ul li .sub {
max-height: 0;
transition: max-height 0.4s ease;
overflow: hidden;
}
.overlay .menu ul li .sub.visible {
max-height: 500px;
transition: max-height 0.4s ease;
}
Have a look over here (Just click on the 'Service' button)

I have a drop down menu now how to create submenu inside one link using css

I am very new to css trying to learn new language, I have a dropdowm which i had done using css and html now how to create a submenu into it on hover over one link
Check my code till now what i did :
.nav-collapse .nav li a {
font-size: 13px;
color: #7281a1;
font-family: 'Noto Sans', sans-serif;
font-weight: 700;
text-shadow: none;
padding: 25px 15px 26px 30px;
}
.nav-collapse .nav>li {
margin-left: 3px;
position: relative;
}
.nav-collapse .nav li a#home-nav {
background: url('../images/home.png') 3px center no-repeat;
}
.nav-collapse .nav li a:hover {
text-decoration: underline;
color: #7281a1;
}
ul.dropdown {
position: absolute;
width: 150px;
background: #fff;
top: 110%;
left: 0;
border-top: 2px solid #8248ac;
visibility: hidden;
transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
ul.dropdown:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 5px solid #8248ac;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
left: 20px;
top: -10px;
}
ul.dropdown li {
border-top: 1px solid #f7f8f9;
}
ul.dropdown li:first-child {
border-top: none;
}
ul.dropdown li a {
display: inline-block;
padding: 10px 7px !important;
}
.nav-collapse .nav>li:hover ul.dropdown {
visibility: visible;
top: 100%;
}
<div class="nav-collapse collapse">
<ul class="nav">
<li>
<a id="home-nav" href="#">Menu</a>
<ul class="dropdown">
<li class="dropdown">Dropdown
<ul>
<li>sub-dropdown</li>
</ul>
</ul>
</li>
</ul>
</div>
So when user hover on Menu dropdown should come and when user hover in dropdown sub-drop down should come
Thanks in advance!!!

You should hide the sub-menu and show it when you hover on the link, just like the first dropdown
add this code to your css file
ul.dropdown li ul {
display:none;
}
ul.dropdown li.dropdown:hover ul {
display:block;
}
See working snippet:
.nav-collapse .nav li a {
font-size: 13px;
color: #7281a1;
font-family: 'Noto Sans', sans-serif;
font-weight: 700;
text-shadow: none;
padding: 25px 15px 26px 30px;
}
.nav-collapse .nav>li {
margin-left: 3px;
position: relative;
}
.nav-collapse .nav li a#home-nav {
background: url('../images/home.png') 3px center no-repeat;
}
.nav-collapse .nav li a:hover {
text-decoration: underline;
color: #7281a1;
}
ul.dropdown {
position: absolute;
width: 150px;
background: #ccc;
top: 110%;
left: 0;
border-top: 2px solid #8248ac;
visibility: hidden;
transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
ul.dropdown:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 5px solid #8248ac;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
left: 20px;
top: -10px;
}
ul.dropdown li {
border-top: 1px solid #f7f8f9;
}
ul.dropdown li:first-child {
border-top: none;
}
ul.dropdown li a {
display: inline-block;
padding: 10px 7px !important;
}
.nav-collapse .nav>li:hover ul.dropdown {
visibility: visible;
top: 100%;
}
ul.dropdown li ul {
position: absolute;
left: 100%;
top: -2px;
background: #ccc;
width: 100%;
border-top: 2px solid #8248ac;
display: none;
}
ul.dropdown li.dropdown:hover ul {
display: block;
}
<div class="nav-collapse collapse">
<ul class="nav">
<li>
<a id="home-nav" href="#">Menu</a>
<ul class="dropdown">
<li class="dropdown">Dropdown
<ul>
<li>sub-dropdown</li>
</ul>
</ul>
</li>
</ul>
</div>

Having trouble keeping Drop Down Menu Centered when resizing browser

So, I'm having trouble with when I am running my page and resizing the browser / on mobile the drop down menu becomes uncentered and runs off the page. I think I have to fix my padding levels but I am not sure where and when I have, it has messed up more than what I was fixing.
Any help, helps!
[
$('.drop-down').click(function() {
$(this).hide();
});
$('.nav-main li').click(function() {
$('.drop-down').hide();
});
//drop down slide down
$('.nav-main li ul').hide().removeClass('.drop-down');
$('.nav-main li').hover(
function openDrop() {
$('ul', this).stop().slideDown(900);
}, function closeDrop() {
$('ul', this).stop().slideUp(1000);
});
.nav-main {
position: absolute;
top: 0;
height: 65px;
width: 100%;
text-align: center;
}
.nav-main ul {
position: relative;
margin: 0 auto;
padding: 0;
list-style: none;
font-size: 22px;
line-height: 100%;
font-family: 'Futura W01 Bold', sans-serif;
text-align: center;
text-transform: uppercase;
display: inline-block;
width: 100%;
}
.nav-top {
position: relative;
margin: 0;
padding: 0 66px 0 50px;
float: none;
display: inline-block;
list-style: none;
}
.nav-top:first-child {
padding-left: 0;
}
.nav-top:last-child {
background-image: none;
padding-right: 0;
}
.nav-top:last-child:after {
content: none;
}
.nav-top > a {
position: relative;
display: block;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top a:hover,
.nav-top.active > a {
color: #454545;
border-bottom: 4px solid #00e9d9;
text-decoration: none;
}
.nav-top ul {
display: none;
position: absolute;
left: -8.75px;
width: 105%;
top: calc(100% - 1px);
border-bottom-left-radius: .3em;
border-bottom-right-radius: .3em;
}
.nav-top:hover ul {
position: absolute;
top: calc(100% - 1px);
left: -8.75px;
width: 105%;
}
.nav-top li {
float: center;
background-color: #e9e9e9;
padding-top: 16px;
padding-bottom: 10px;
text-align: inherit;
}
.nav-top li:last-child {
padding-bottom: 16px;
border-bottom-left-radius: .3em;
border-bottom-right-radius: .3em;
}
.nav-top li > a {
position: relative;
display: inline;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 1px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top:after {
display: block;
position: absolute;
left: 100%;
top: -17px;
width: 22px;
z-index: 1;
transform: translateX(-50%);
height: 100%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav-main" role="navigation">
<ul>
<li class="nav-top">Welcome</li>
<li class="nav-top">About
<ul class="drop-down">
<li class="nav-drop">Services</li>
<li class="nav-drop">Clients</li>
<li class="nav-drop">Press</li>
<li class="nav-drop">Leadership</li>
<li class="nav-drop">Follow Us</li>
</ul>
</li>
<li class="nav-top">Contact</li>
</ul>
<span class="nav-arrow"></span>
</nav>
]3

You can a #media breakpoint to target a certain browser width in order to reduce the font-size for the menu for the now smaller screen size.
#media only screen and (max-width: 767px) {
.nav-main ul {
font-size: 18px;
}
}
See this fiddle (reduce the frame window width to see the changes)
Of course the font-size and browser window threshold width are up to you and your needs. And you may want to change more the the font-size... like paddings for example.

By using media queries you can fixed this problem, media query means you will define CSS according to the device screen size, you can learn more about media query from this.

While the other answers are correct in using a #media breakpoint I would also suggest using 'rem' units for sizes as opposed to "px". Working in relative units has several advantages

How to show the titles properly in an expandable menu?

I'm trying to do a expandable menu in jQuery and CSS3, here is the fiddle:
http://jsfiddle.net/mNcuQ/3/
When you click the slidebar, the titles section is showed. But I'm afraid it doesn't look properly. What I'm trying to do is when the .expanded class is active and the width of the slidebar is modified ( with the transition finished ) then show the titles of the menu with fade in effect. As I do now, the titles of the menu are not respeting the display: inline-block. Surely I'm missing something...
Do you have any idea or tip to do it? What is better to use in this case: CSS3 transition or jQuery animation?
Here is the code of the fiddle:
HTML
<div id="sidebar">
<a class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<nav id="nav" class="navigation" role="navigation">
<ul class="unstyled">
<li class="active" data-section="1"><i class="icon-home"></i> <span>Home</span>
</li>
<li data-section="2" class=""><i class="icon-rocket"></i> <span>Services</span>
</li>
<li data-section="3" class=""><i class="icon-laptop"></i> <span>Projects</span>
</li>
<li data-section="6" class=""><i class="icon-money"></i> <span>Price</span>
</li>
<li data-section="4" class=""><i class="icon-pencil"></i> <span>Team</span>
</li>
<li data-section="5" class="last"><i class="icon-envelope"></i> <span>Contact</span>
</li>
</ul>
</nav>
</div>
JS
$(document).ready(function ($) {
$('#sidebar').click(function () {
$('html').toggleClass('expanded');
});
});
CSS
#sidebar {
background-color: #151515;
height: 120%;
padding: 0;
position: fixed;
left: 0;
top: 0;
width: 50px;
z-index: 2;
cursor:pointer;
overflow-y: hidden;
}
#nav {
margin-top: 80px;
}
#nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav ul li i {
font-size : 15px;
}
#nav ul li {
color: #F1F1F1;
cursor: pointer;
display: inline-block;
line-height: 22px;
filter: alpha(opacity=40);
font-size: 16px;
font-size: 1.6rem;
font-style: normal;
font-weight: 100;
opacity: .4;
padding: 8px 0 8px 15px;
text-transform: uppercase;
width: 70%;
}
#sidebar {
-webkit-transition: width 500ms ease;
-moz-transition: width 500ms ease;
-ms-transition: width 500ms ease;
-o-transition: width 500ms ease;
transition: width 500ms ease;
}
#nav ul li.active {
filter: alpha(opacity=100);
opacity: 1;
}
#nav ul li.last {
padding-right: 0px;
}
#nav li span {
display: inline-block;
font-size: 14px;
font-size: 1.4rem;
height: 0;
opacity: 0;
overflow: hidden;
padding-left: 10px;
width: 0;
}
.btn-navbar {
cursor: pointer;
filter: alpha(opacity=40);
float: left;
margin: 20px 5px 10px;
opacity: .4;
padding: 7px 10px;
}
.btn-navbar .icon-bar {
background-color: #F5F5F5;
border-radius: 1px 1px 1px 1px;
box-shadow: none;
display: block;
height: 2px;
width: 18px;
}
/* Expanded Nav Styling */
.expanded #container {
left: 100px;
transform: translate3d(50px, 0px, 0px) scale3d(1, 1, 1);
}
.expanded #sidebar {
width: 150px;
}
.expanded #nav li {
width: 90%;
}
.expanded #nav li span {
display: inline-block;
height: auto;
opacity: 1;
overflow: visible;
width: auto;
}
If you need more info, let me know and I'll edit the post.

use transition-delay maybe?
Fiddle (moved revelant css classes to bottom)
#nav li span {
display: inline-block;
font-size: 14px;
font-size: 1.4rem;
height: 0;
opacity: 0;
overflow: hidden;
padding-left: 10px;
width: 0;
transition:opacity 0.5s ease; // ease opacity
}
.expanded #nav li span {
display: inline-block;
height: auto;
opacity: 1;
overflow: visible;
width: auto;
transition-delay: 500ms; //delay transition by the same amount of sidebar width transition time
}

the problem is that you expanded container is too small to position the headlines correct, make it a bit larger and it will work
.expanded #sidebar {
width: 180px;
}

How could I make a menu dropdown on click

how could I make my menu drop down when i click on it instead of hover?
I want to be able to click on .logo and have the ul dropdown. and to also hide the menu when i click on it again. The div inside .logo is just a triangle pointing down.
html code:
<div id='Logo_dropdown'>
<ul>
<li class='logo'><a href='#'><div></div></a></li>
<ul>
<li><a href='#upload'><span>Upload Logo</span></a></li>
<li><a href='#Edit'><span>Edit Logo</span></a></li>
</ul>
</div>
CSS code:
#Logo_dropdown ul {
padding: 0;
margin-left:auto;
margin-right:auto;
position:absolute;
top: 50%;
margin-top: -30px;
font-size:14px;}
#Logo_dropdown li {
margin: 0;
padding: 0;}
#Logo_dropdown a {
margin: 0;
padding: 0;
}
#Logo_dropdown ul {
list-style: none;
}
#Logo_dropdown a {
text-decoration: none;
}
#Logo_dropdown {
height: 50px;
position:absolute ;
background: #FCFCFC;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
left:200px;
opacity:0.9;
filter:alpha(opacity=90);
padding-left:1%;
padding-right:auto;
width: 190px;
/* background-color:#F3F3F3 ; /*color for Nav Menu Bar
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);*/
width: 140px;
z-index:1;
}
#Logo_dropdown > ul > li {
float: left;
position: relative;
left:140px;}
#Logo_dropdown > ul > li > a {
color: #999;
font-family: Verdana, 'Lucida Grande';
font-size: 12px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#Logo_dropdown > ul > li > a:hover {
color:#2bafb8; /*color nav menu bar when mouse hovers*/
}
#Logo_dropdown > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
position: absolute;
top: 55px;
left: 80%;
margin-left: -90px;
width: 250px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
width:100px;
}
#Logo_dropdown > ul > li:hover > ul {
opacity: 1;
top: 95px; /*position of hover li*/
z-index:1;
overflow: visible;
}
#Logo_dropdown > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #fafafa transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#Logo_dropdown > ul ul > li {
position: relative;
overflow: visible;
}
#Logo_dropdown ul ul a {
color: #2bafb8;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fafafa;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#Logo_dropdown ul ul a:hover {
background-color: #f0f0f0;
}
#Logo_dropdown ul ul a:hover {
background-color: #2bafb8;
color: #f0f0f0 !important;
}
div{
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #CCC;
}

You can use simply toggle() to view the dropdown :)
I want to be able to click on .logo and have the ul dropdown
Use this :
$('.logo').click(function () {
$('#logodropdown ul.second').toggle();
}
This way, it will show it if hidden, and hide it if visible. You can also set some speed if you want, inside the parathesis as toggle(time in milliseconds).
And please change the second ul to <ul class="second"> as the code might misunderstand your approach and hide both of the lists in the #logodropdown. This would be a good approach to what you want to happen! Or even use a class to differentiate between both the lists.
You can use CSS to do some stuff like :active or :focus. But they won't cause a change in the properties of other elements. That's where you need a help of jQuery. :)

For click you will need to use Javascript, as there is no click event handling in CSS.