I don't know how much of this code is necessary to show you, but I honestly can not figure out how to fix my problem so I'll just list it all. I have a dropdown menu for my mobile version of my site that is ALMOST complete. This is what it looks like when I pull up the menu (menu div):
Home
About
Contact
My problem now is the sub-menus. When I click on them I see something like this (empty space at top of li ul and next menu item covered up):
Home
<---empty space
My dropdown li
My dropdown li 2
My dropdown li 3
Contact
I've tried messing with margins, I've tried changing around display types, I've tried changing position types... The closest I've come to getting it to work correctly is to use a negative margin on the li ul to get rid of the empty space, but it still covers up the "about". I just don't understand what I can do to fix the css! Any help is greatly appreciated!!
$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function() {
$("#nav").toggle();
});
$(window).resize(function() {
if (window.innerWidth > 768) {
$("#nav").removeAttr("style");
}
});
$('li.dropdown').click(function() {
$('li.dropdown').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
ul {
width: 100%;
position: absolute;
top: 51px;
left: 0 !important;
z-index: 100;
}
li ul {
display: block;
width: 100%;
position: relative;
}
li ul li {} li {
width: 33%;
float: left;
list-style: none;
padding-left: 0;
}
li:last-child {
border-right: none;
}
li a {
display: block;
background: #879270;
padding: 4% 10%;
font-size: 1.35em;
text-decoration: none;
list-style: none;
text-align: left;
color: #000000 !important;
}
#media screen and (min-width: 768px) {
#menu {
display: none;
}
}
#media screen and (max-width: 768px) {
#menu {
width: 1.4em;
display: block;
background: #879270;
font-size: 1.35em;
text-align: center;
position: absolute;
z-index: 1000;
top: 15px;
right: 10px;
border-radius: 3px;
border: 1px solid #000000;
padding-top: 5px;
}
#nav.js {
display: none;
}
ul {
width: 100%;
}
li {
width: 100%;
border-right: none;
}
}
li.dropdown ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<ul id="nav">
<li class="dropdown">Home
<ul>
<li>My Dropdown li
</li>
<li>My Dropdown li 2
</li>
<li>My Dropdown li 3
</li>
</ul>
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
You hava top value (top: 51px;) on ul which is inheriting to your sub-menus. Add top: 0; to li ul so that isn't iniherited on sub-menus.
ul {
width: 100%;
position: absolute;
top: 51px;
left: 0 !important;
z-index: 100;
}
li ul {
display: block;
width: 100%;
position: relative;
top: 0;
}
li ul li {}
li {
width: 33%;
float: left;
list-style: none;
padding-left: 0;
}
li:last-child {
border-right: none;
}
li a {
display: block;
background: #879270;
padding: 4% 10%;
font-size: 1.35em;
text-decoration: none;
list-style: none;
text-align: left;
color: #000000 !important;
}
#media screen and (min-width: 768px) {
#menu {
display: none;
}
}
#media screen and (max-width: 768px) {
#menu {
width: 1.4em;
display: block;
background: #879270;
font-size: 1.35em;
text-align: center;
position: absolute;
z-index: 1000;
top: 15px;
right: 10px;
border-radius: 3px;
border: 1px solid #000000;
padding-top: 5px;
}
#nav.js {
display: none;
}
ul {
width: 100%;
}
li {
width: 100%;
border-right: none;
}
}
li.dropdown ul {
display: none;
}
<ul id="nav">
<li class="dropdown">Home
<ul>
<li>My Dropdown li</li>
<li>My Dropdown li 2</li>
<li>My Dropdown li 3</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function(){
$("#nav").toggle();
});
$(window).resize(function(){
if(window.innerWidth > 768) {
$("#nav").removeAttr("style");
}
});
$('li.dropdown').click(function() {
$('li.dropdown').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
</script>
Related
I'm trying to make a nav bar I found on CodePen, but the problem is it doesn't have a dropdown menu. I know how to make a dropdown menu, but don't know how to position and style it as of now. I'm still fairly new to CSS.
Any help is very much appreciated, thank you!
If the code is not responsive, here's the original.
https://codepen.io/WebDevSimplified/pen/LqKQRK
<nav class="navbar">
<a div class="brand-title" href="submissions.html">AESTHETIC PRESS</a></div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li> Books</li>
<ul>
<li>Young Adult</li>
<li>Adult</li>
<li>Non-Fiction</li>
</ul>
</li>
<li>Author</li>
<li>About Us</li>
<ul>
<li>Our Team</li>
</ul>
</li>
<li>News</li>
<li>Contact Us <i class="fa-solid fa-caret-down"></i>
<ul>
<li>Submissions</li>
<li>Permissions</li>
<li>Translation</li>
<li>Press</li>
<li>Hiring</li>
<li>Contact</li>
</ul>
</li>
</div>
</nav>
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
height: 100px;
}
.brand-title {
text-decoration: none;
color: white;
font-size: 2.0rem;
margin: 1.5rem;
cursor: pointer;
}
.brand-title:hover {
color: white;
}
.navbar-links {
padding: 0px;
margin-right: 35%;
border: red dotted 3px;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
I guess you want nested dropdown in navigation link. Also you can use bootstrap navbar or w3school navbar.
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
.navigation {
height: 70px;
background: #262626;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a, .brand a:visited {
color: #fff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a, nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #262626;
color: #fff;
text-decoration: none;
}
nav ul li a:hover, nav ul li a:visited:hover {
background: #2581dc;
color: #fff;
}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #262626;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #fff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<section class="navigation">
<div class="nav-container">
<div class="brand">
Logo
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Pricing
</li>
<li>
Portfolio
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
</section>
<article>
<h2>Navigation</h2>
<p>Responsive Dropdown Navigation Bar.</p>
</article>
Accordingly to your reply to my comment I have added some code to yours.
So please check the code from https://codepen.io/13rpsingh/pen/poajyXK
window.addEventListener("load", ()=>{
let toggleButton = document.querySelector(".toggle-button");
let navbarLinks = document.querySelector(".navbar-links");
toggleButton.addEventListener('click', (e)=>{
if(navbarLinks.classList.contains("active")){
navbarLinks.classList.remove("active")
toggleButton.classList.remove("active")
}else{
navbarLinks.classList.add("active")
toggleButton.classList.add("active")
}
})
let menuDropDown = document.querySelector(".navbar-links ul li ul");
let dropDownTrigger = document.querySelector("#dropdown-trigger");
if(dropDownTrigger){
dropDownTrigger.addEventListener('click', (e) =>{
if(menuDropDown.style.display == "flex"){
menuDropDown.style.display = "none";
}else{
menuDropDown.style.display = "flex";
}
})
}
})
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
height: max-content;
max-width:100%;
}
.brand-title {
text-decoration: none;
color: white;
font-size: 2.0rem;
margin: 1.5rem;
cursor: pointer;
}
.brand-title:hover {
color: white;
}
.navbar-links {
padding: 0px;
margin-right: 35%;
border: red dotted 3px;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.toggle-button .bar{
position: absolute;
transition: all .3s ease-in-out;
}
.toggle-button .bar:nth-of-type(1){
top: 0;
}
.toggle-button .bar:nth-of-type(2){
top: 50%;
transform : translateY(-50%);
}
.toggle-button .bar:nth-of-type(3){
bottom: 0;
}
.toggle-button.active .bar:nth-of-type(1){
top: 50%;
transform: rotate(-45deg) translateY(-50%);
}
.toggle-button.active .bar:nth-of-type(2){
display:none;
}
.toggle-button.active .bar:nth-of-type(3){
bottom: 50%;
transform: rotate(45deg) translateY(50%);
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
position:relative;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
.navbar-links ul li ul{
display:none;
flex-direction: column;
position:absolute;
background:#d0d0d0;
max-width: 100%;
}
.navbar-links ul li ul li a{
color : black;
}
.navbar-links ul li ul li a:hover{
color : white;
}
<nav class="navbar">
<a div class="brand-title" href="submissions.html">AESTHETIC PRESS</a></div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li> Books</li>
<ul>
<li>Young Adult</li>
<li>Adult</li>
<li>Non-Fiction</li>
</ul>
</li>
<li>Author</li>
<li>About Us</li>
<ul>
<li>Our Team</li>
</ul>
</li>
<li>News</li>
<li id="dropdown-trigger">Contact Us <i class="fa-solid fa-caret-down"></i>
<ul>
<li>Submissions</li>
<li>Permissions</li>
<li>Translation</li>
<li>Press</li>
<li>Hiring</li>
<li>Contact</li>
</ul>
</li>
</div>
</nav>
Maybe, you can easily understand the code which I added.
I hope It will help
Relevant code is below, full code is here. The code for the nav follows this pen: https://codepen.io/taniarascia/pen/dYvvYv and all styles/scripts/html are right. I don't know what caused the services dropdown to not push down the following li elements in mobile view. The drop down worked when I first put it on my site but after messing with a few things seemingly unrelated it does not work and I have no idea at this point what happened. Inspector shows that all the right styles are being applied, and that no extra styles are being applied.
HTML
<div class="main_nav">
<div class="navigation">
<div class="nav-container">
<div class="brand">
<img src="assets/images/logo.svg" style="height: 100%;">
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
<ul class="nav-dropdown">
<li>
Web Design
</li>
<!--<li>-->
<!-- Web Development-->
<!--</li>-->
<!--<li>-->
<!-- Graphic Design-->
<!--</li>-->
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
<li>
Blog
</li>
</ul>
</nav>
</div>
</div>
</div>
CSS
#charset "UTF-8";
.main_nav {
position: fixed;
top: 0px;
max-height: 70px;
z-index: 10;
width: 100vw;
/* padding-top: 17px; */
background: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
/* padding-bottom: 6px; */
left: 0;
right: 0;
height: 70px;
padding: 10px 4px;
box-sizing: border-box;
}
#media only screen and (max-width: 500px) {
.main_nav {
padding-top: 25px;
}
}
.sticky {
background-color: #ffffff;
opacity: 1;
top: 0px;
}
.navigation {
height: 50px;
background: #ffffff;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
height: 50px;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
/* width: 40%; */
}
.brand a,
.brand a:visited {
color: #5fc3e4;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
height: 50px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color: white;
}
nav ul li {
float: left;
position: relative;
height: 50px;
line-height: 50px;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 50px;
background: #ffffff;
color: #5fc3e4;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
color: #cfcfcf;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #ffffff;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 50px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #5fc3e4;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
JS
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
You have other js errors in the console.
For example:
pen.js:11 Uncaught ReferenceError: $ is not defined
at pen.js:11
And this stops the code coming after it from executing.
Once I cleaned those up (there were 2 or 3), the hamburger started working:
https://codepen.io/lennart_rikk/pen/ZVqJVZ
(NB! In css I changed the main nav opacity to 1, to see the menu)
I have a problem with side navigation bar. When i clicked on sub menu link menu goes hide. But I want to open always when i clicked on sub menu link. It goes hide when main menu clicked.
My code below:
$(document).ready(function() {
$('#menu li > a').click(function(e) {
$(this).addClass("selected");
if ($(this).next('ul').length > 0) {
e.preventDefault();
var subNav = $(this).next('ul');
if (subNav.is(':visible')) {
subNav.slideUp('normal')
} else {
$('#menu ul:visible').slideUp('normal');
subNav.slideDown('normal');
$("a.selected").removeClass("selected");
$(this).addClass("selected");
}
}
});
$('.nav-trigger').click(function() {
$('.side-nav').addClass('visible');
});
});
.side-nav.visible {
display: block;
}
.side-nav {
position: absolute;
width: 100%;
height: 100%;
background-color: #2e3e4e;
z-index: 99;
display: none;
overflow-y: auto;
}
.side-nav #menu {
margin: 0;
padding: 0;
}
.side-nav #menu ul {
display: none
}
.side-nav #menu,
.side-nav #menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.side-nav #menu>li {
background-color: #2e3e4e;
list-style: none;
position: relative;
}
.side-nav #menu>li>a {
padding: 16px 16px;
border-bottom: 1px solid #3A4B5C;
width: 100%;
display: block;
text-decoration: none;
color: #f2f2f2;
font-size: 1.2em;
}
.side-nav #menu li a:hover {
color: #ccc;
text-decoration: none;
}
.side-nav #menu li ul li a {
background-color: #384858;
color: #fff;
width: 100%;
display: block;
padding: 16px 16px;
border-bottom: 1px solid #2e3e4e;
text-decoration: none;
}
.side-nav #menu li ul li a:hover {
color: #2addd4;
text-decoration: none;
background-color: #2e3e4e;
}
.side-nav #menu li ul li a::before {
display: inline-block;
cursor: pointer;
width: 10px;
height: 10px;
content: "\f0da";
font-family: FontAwesome;
left: 0px;
position: relative;
top: 0;
background-color: transparent;
}
.side-nav #menu li ul li a:hover::before {
display: inline-block;
cursor: pointer;
width: 10px;
height: 10px;
content: "\f0da";
font-family: FontAwesome;
left: 0px;
position: relative;
top: 0;
background-color: transparent;
}
.selected {
z-index: 9999;
border-left: 2px;
}
.side-nav ul li a:hover:after {
content: '';
position: absolute;
width: 4px;
height: 100%;
top: 0;
left: 0;
background-color: #2addd4;
}
.side-nav ul li a.selected:after {
content: '';
position: absolute;
width: 4px;
height: 100%;
top: 0;
left: 0;
background-color: #2addd4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="side-nav">
<nav>
<ul id="menu">
<li>
<span><i class="fa fa-dashboard"></i></span> <span>Dashboard</span>
<ul>
<li>page1</li>
</ul>
</li>
<li>
<span><i class="fa fa-user"></i></span> <span>User Page</span>
</li>
<li>
<span><i class="fa fa-user"></i></span> <span>Admin Page</span>
<ul>
<li>adminpage 1</li>
<li>adminpage 2</li>
</ul>
</li>
</ul>
</nav>
</div>
I have got some great info from this forum and this is my first question so be nice..
I have a top nav bar which is fixed.
The fixed part seems to be working fine but i now have two issues.
In responsive mode when you click the hamburger icon it opens beautifully and you can jump to any anchor on the page ( i am designing a 1 page site). But the nav wont close upon click or tap so i am left with a gaping open nav.
Second problem is when the nav is fixed and i scroll down and go over a form the form fields are displayed on top of the nav bar, in both 960 width & responsive.
I have attached what i think is the code here and any advice would be greatly appreciated.
Cheers
Max
This is the html:
<nav class="clearfix">
<ul class="clearfix">
<li><span style="color:white">Home
</li>
<li><span style="color:white">Book
</li>
<li><span style="color:white">Join
</li>
<li><span style="color:white">Contact
</li>
</ul>
<span style="color:white">Menu</span>
This is the css:
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 1em;
font-family: Roboto, sans-serif;
font-weight: 400;
position: fixed;
border-bottom: 2px solid #283744;
text-align: center;
}
nav ul {
padding: 0;
margin: 0 auto;
width: auto;
height: 40px;
}
nav li {
display: inline;
float: none;
}
nav a {
color: #fff;
display: inline-block;
width: 120px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px #303030;
}
nav li a {
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover,
nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width: 600px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content: "";
background: url('../images/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media only screen and (max-width: 320px) {
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
This is the java script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
For first question add this js:
$('nav li>a').on('click', function (e) {
if($(window).width()<600){
menu.slideUp();
}
});
the full code is below:
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$('nav li>a').on('click', function(e) {
if ($(window).width() < 600) {
menu.slideUp();
}
});
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 1em;
font-family: Roboto, sans-serif;
font-weight: 400;
position: fixed;
border-bottom: 2px solid #283744;
text-align: center;
z-index: 99;
}
nav ul {
padding: 0;
margin: 0 auto;
width: auto;
height: 40px;
}
nav li {
display: inline;
float: none;
}
nav a {
color: #fff;
display: inline-block;
width: 120px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px #303030;
}
nav li a {
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover,
nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width: 600px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content: "";
background: url('../images/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media only screen and (max-width: 320px) {
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
<nav class="clearfix">
<ul class="clearfix">
<li><span style="color:white">Home
</li>
<li><span style="color:white">Book
</li>
<li><span style="color:white">Join
</li>
<li><span style="color:white">Contact
</li>
</ul> <span style="color:white">Menu</span>
</nav>
ul>li>a can be changed with a ID or class as you prefer.
For 2nd question add this css:
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 1em;
font-family: Roboto, sans-serif;
font-weight: 400;
position: fixed;
border-bottom: 2px solid #283744;
text-align: center;
z-index: 99;
}
DEMO
Well I am not really good in JS, but I think the only one can help solving my problam. I got sub menu with sub menu also. very simple:
<div class="dr_nav">
<ul>
<li><a href='#'>HOME</a>
<ul>
<li><a href='#'>List Example #1</a></li>
<li><a href='#'>List Example #2</a>
<ul>
<li> <a href='#'>List Example Child #1</a> </li>
</ul>
</li>
<li><a href='#'>List Example #3(hover)</a></li>
</ul>
</li>
</ul>
</div>
BUT! The thing I want, when I hovers over my "List Example #2" and "List Example Child #1" appears (in CSS i put display:none to it) it will stay visible even if I move out my coursor from its parent "List Example #2". I hope someone can help me with this.
My CSS is a bit hard and unorganized:
.dr_menu
{
margin: 0;
padding: 0;
list-style: none;
position: relative;
z-index: 999;
}
.dr_menu>ul
{
margin: 0;
padding: 0;
text-align: center;
}
.dr_menu>ul>li
{
display: inline-block;
padding: 0 0 10px 0;
margin-right: 40px;
}
.dr_menu>ul>li:last-child
{
margin:0;
}
.dr_menu ul li>ul
{
display: none;
position: absolute;
left: 0;
background-color: white;
margin: 0;
padding-top: 10px;
top: 100%;
-webkit-padding-start: 0px;
width: 1400px;
}
.dr_menu ul li ul li, .dr_menu ul li ul li a
{
padding: 10px 0px 10px 30px;
text-align: left;
}
.dr_menu ul li ul li a
{
display: block;
width: 770px;
color: #A0A0A0;
margin-left: 300px;
}
.dr_menu ul li ul li ul
{
display: none;
padding: 0;
position: relative;
padding-top: 20px;
}
.dr_menu ul li ul li ul li a
{
margin-left: 330px;
width: 740px;
}
.dr_menu ul li ul li ul li
{
padding: 0;
}
.dr_menu a
{
text-decoration: none;
color: #A0A0A0;
}
.dr_menu>ul>li>ul>li
{
padding-left: 0;
}
.dr_menu ul>li:hover
{
background-image: url('./img/nav_copy.png');
background-position: bottom;
background-repeat: no-repeat;
}
.dr_menu ul>li>a:hover
{
color: white;
}
.dr_menu ul li a:hover
{
color: white;
}
.dr_menu>ul>li>ul>li:last-child
{
margin-bottom: 30px;
}
.dr_menu li:hover>ul
{
display: block;
color: white;
}
.dr_menu ul li ul li a:hover
{
background-color: #A0A0A0;
color: black;
}
Here is mu JS:
jQuery(document).ready(function(){
$('#child').mouseleave(function() {$('#child').show()}, false);
}
You can make a menu with just CSS:
Demo Fiddle
.dr_nav li:hover>ul{
display:block;
}
.dr_nav li>ul{
display:none;
}