Need to make sub menu full width of screen - javascript

Using css how I can make a sub-menu start from the left side of the screen instead of starting it from under the parent item.
nav {
margin: 0 auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
}
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
nav ul li a {
display: block;
padding: 5px 15px;
color: #000000;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
<nav>
<ul>
<li>
Contacts
<ul>
<li>Add Contact</li>
<li>View Contacts</li>
</ul>
</li>
<li>
Tickets
<ul>
<li>New Ticket</li>
<li>View Tickets</li>
</ul>
</li>
<li>Invoices</li>
<li>Itemised Calls</li>
</ul>
</nav>
here is a jsfiddle: http://jsfiddle.net/jhmkqrye/1/ - hope it helps
When you hover on Tickets it's sub-menu starts from below the Ticket which I want to start below the Contacts from the start of screen width to end of screen width.

you can try to set the parent position for relative and child's to absolute and then set the position using left, right, bottom, top
for example left: 0; would put your child item on the very left
edit: is jsfiddle correct? 'cause i can't seem to find any sub-menu on hover, and on click it throws 404

Related

Dropdown - cant click on the items

I'm trying to fix my dropdown, whenever I hover over my dropdown I can't click on the items because it disappears before I can click on them. I don't know how to fix it. Here is a bit of code I have.
#navContainer {
margin: 0;
padding: 0;
padding-top: 17px;
width: 220px;
}
#navContainer ul {
margin: 0;
padding: 0;
list-style: none;
}
#navContainer ul li {
position: relative;
}
#navContainer ul li span {
display: block;
}
#navContainer ul li a {
text-decoration: underline;
color: orange;
display: block;
padding: 8px;
font-weight: bold;
font-size: large;
}
#navContainer ul ul {
position: absolute;
display: none;
}
#navContainer ul li:hover ul {
width: 80%;
position: absolute;
display: block;
left: 88px;
top: 0;
}
<div id="navContainer">
<ul>
<li><span>Home</span></li>
<li>
<span>About </span>
<ul>
</ul>
</li>
<li>
<span>Quiz's</span>
<ul>
<li>McDonalds</li>
<li>KFC</li>
<li>Burger King</li>
<li>Subway</li>
</ul>
</li>
<li><span>Info</span></li>
</ul>
</div>
This is how my page looks, if i try to move my mouse from McDonalds to KFC my navbar disapears
I tried to make it so the navbar toggles when i click on Quiz's but i couldn't make it work. I hope someone can help me fix it.
Just a couple of issues with your selectors in your CSS. I added background-color so you can see visually how they are connected. Also, the span seemed unnecessary.
#navContainer {
margin: 0;
padding: 0;
padding-top: 17px;
width: 220px;
position: relative;
}
#navContainer ul {
margin: 0;
padding: 0;
list-style: none;
background: lightgrey;
position: relative;
}
ul>li {
position: relative;
}
#navContainer ul li a {
text-decoration: underline;
color: orange;
display: block;
padding: 8px;
font-weight: bold;
font-size: large;
position: relative;
}
#navContainer ul>li>ul {
position: absolute;
display: none;
left: 100%;
width: 100%;
background-color: pink;
top: 0px;
}
#navContainer>ul>li:hover>ul {
display: block;
}
<div id="navContainer">
<ul>
<li>Home</li>
<li>
About
<ul>
</ul>
</li>
<li>
Quiz's
<ul>
<li>McDonalds</li>
<li>KFC</li>
<li>Burger King</li>
<li>Subway</li>
</ul>
</li>
<li>Info</li>
</ul>
</div>
You set the submenu ul to be visible when hovered on parent li item here: #navContainer ul li:hover ul, so as soon as mouse leaves parent li, the submenu ul visibility is set back to none.
Added a border to the li elements to demonstrate.
https://jsfiddle.net/rojqczsp/
You have to work around this. May be try making parent li elements big enough to hold the submenu ul and set the submenu ul position to absolute to keep it within the parent element's dimensions. Or something else. But hope you understand how it works.

Responsive navigation menu toggle not working (JS)

I am trying to make my navigation menu responsive. I have made it so the navigation list items are hidden on mobile display and the menu tag appears ready to be clicked to show the menu but can't seem to get my list items to show on click when on mobile display. Any help please?
function toggleMenu() {
var menuBox = document.getElementById('nav-menu');
if(menuBox.style.display == "block") {
menuBox.style.display = "none";
}
else {
menuBox.style.display = "block";
}
}
header {
height: 128px;
border-bottom: 1px solid #f0f0f0;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 4000;
background: white;
}
header .nav-container {
max-width: 100em;
margin: auto;
display: flex;
justify-content: space-between;
z-index: 45;
padding: 0 1.5rem;
}
header .nav-container .logo {
width: 14%;
padding-top: 2.8rem;
}
header .nav-container p {
display: none;
}
#media only screen and (max-width: 600px) {
header .nav-container p {
display: block;
}
}
header .nav-container nav {
padding-top: 2rem;
}
header .nav-container nav ul {
display: block;
}
#media only screen and (max-width: 600px) {
header .nav-container nav ul {
display: none;
}
}
header .nav-container nav ul li {
position: relative;
display: inline-block;
}
header .nav-container nav ul li a {
display: inline-block;
transition: all 0.5s linear;
text-decoration: none;
padding: 16px 10px;
color: #00458b;
}
header .nav-container nav ul li a:hover {
color: #00458b;
}
header .nav-container nav ul li ul {
display: none;
background: white;
position: absolute;
top: 100%;
width: 160px;
padding: 0;
z-index: 500;
}
header .nav-container nav ul li ul li,
header .nav-container nav ul li ul a {
width: 100%;
}
header .nav-container nav ul li:hover ul {
display: block;
}
header .nav-container nav ul .menu-item-40 a {
padding: 0;
}
<header>
<div class="nav-container">
<p id="menu" onclick="toggleMenu()"> Menu</p>
<nav class="nav" id="nav-menu" role="navigation">
<ul>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
<li class="nav-item">Services
<ul class="sub-menu">
<li class="nav-item">Windows
</li>
<li class="nav-item">Glass
</li>
<li class="nav-item">Doors
</li>
<li class="nav-item">Roofline
</li>
</ul>
</li>
<li class="nav-item">Our Work
</li>
<li class="nav-item">Contact Us
</li>
</ul>
</nav>
</div>
</header>
Your mistake is in you css. Here
#media only screen and (max-width: 600px) {
header .nav-container nav ul {
display: none;
}
}
you have given display: none to the 'ul' but you toggling the nav with your javascript.
Tip: Try using toggle in javascript
element.classList.toggle('className');
here you can have class with display: block and can toggle without checking if the element is already having display block or not.

Navigation Menu Not Working on Big Cartel

I have a custom drop-down navigation menu that I want to use on my big cartel theme. It has HTML, CSS and Java Script.
Unfortunately, It is not working. The Java Script helps with the toggle event.
The drop-downs are on "Shop" and "About". When I click those dropdowns, they don't show.
In my Big Cartel Theme, I first tried linking to the JS file -- that didn't work.
I then put the script in the area and it still didn't work.
Here's the code working
https://codepen.io/findingcolors/pen/ZErZZgo
HTML
<div class="navigation">
<div class="nav-container">
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><i class="fa-solid fa-bars"></i> Menu</a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
Shop <i class="fa-solid fa-angle-down"></i>
<ul class="nav-dropdown">
<li>
All Products
</li>
<li>
Stickers
</li>
<li>
Notepads + Sticky Notes
</li>
<li>
Bookmarks
</li>
<li>
Jewelry
</li>
<li>
Phone Straps
</li>
</ul>
</li>
<li>
About <i class="fa-solid fa-angle-down"></i>
<ul class="nav-dropdown">
<li>
The Brand
</li>
<li>
Shipping + Returns
</li>
<li>
FAQ
</li>
</ul>
</li>
<li>
Contact
</li>
<li>
Cart
</li>
<li>
Search
</li>
</ul>
</nav>
</div>
</div>
CSS
/* --- NAVIGATION bar --- */
.navigation {
height: 50px;
background: #fefcfc;
font-family: "Open Sans", sans-serif;
}
.nav-container {
text-align: center;
margin: 0 auto;
}
nav {
font-size: 16px;
text-transform: uppercase;
font-weight: bold;
}
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: 50px;
background: #fefcfc;
color: #716558;
text-decoration: none;
}
nav ul li a:hover, nav ul li a:visited:hover {
color: #90867a;
}
nav ul li ul li {
min-width: 250px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
text-align: left;
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #fefcfc;
height: 50px;
width: 50px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 50px 0 15px;
}
nav ul {
display: none;
text-align: left;
}
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: inline-block;
}
}
#nav-toggle {
position: absolute;
left: -160px;
top: 10px;
cursor: pointer;
padding: 10px 35px 16px 0px;
color: #716558;
text-decoration: none;
font-size: 16px;
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
Java
(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
The jQuery library was missing from the website.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
After including it, the navigation menu is working now.

jQuery dropdown menu with css

I've made a bit lists and I think I'm lost with them when it comes to jQuery and making my menu to toggle on click event.
Here is what I have: http://jsfiddle.net/3rc63e3L/
The problem is in menu. When mouse is hovering the element, It is showing and when I click it - It hides. But when i'm deleting from CSS
ol > li:hover > ul
{
display: block;
}
It won't even work while clicking on Menu2 tab. The idea is to delete this "hover" thing on menu2 and make it work only for "click". How can i fix it?
You’re trying to toggle the list elements instead of the list itself. Just use the following JavaScript:
$('ol li.submenuone').click(function() {
$('ol li.submenuone ul').toggle();
});
And remove your CSS from above.
Demo: JSFiddle
use jquery instead of css..
$('ol > li.submenuone').click(function() {
$('ol > li.submenuone ul').slideToggle();
});
Use jQuery, initially subMenu should be hidden. Then sho/hide, toggle using jQuery. Changed the css as well.
$('ol li.submenuone').click(function() {
//alert("hello");
$('ol li.submenuone ul').toggle();
});
.nav
{
width: 100%;
padding: 10px 0;
background-color: red;
text-align: center;
box-shadow: 0px -1px 40px black;
position: relative;
z-index: 9999;
}
ol
{
padding: 0;
margin: 0;
list-style-type: none;
font-size: 18px;
height: 35px;
line-height: 200%;
display: inline-block;
letter-spacing: 1px;
}
ol a
{
color: white;
text-decoration: none;
display: block;
}
ol > li
{
float: left;
width: 170px;
height: 40px;
border-right: 1px dashed #800517;
transition-property: background;
transition-duration: .4s;
}
ol > li:first-child
{
border-left: 1px dashed #800517;
}
ol > li:hover
{
background-color: #800517;
}
ol > li > ul
{
list-style-type: none;
padding: 0;
margin: 0;
height: 40px;
width: 100px;
display: none;
}
ol > li> ul
{
display: none;
}
ol > li > ul > li
{
padding: 2px;
background-color: red;
position: relative;
z-index: 9999;
border-top: 1px dashed #800517;
}
ol > li > ul > li:first-child
{
border-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="nav">
<ol>
<li>menu1</li>
<li class="submenuone">menu2
<ul>
<li class="submenutwo">sub1</li>
<ul>
<li class="submenuthree">sub1</li>
<li class="submenuthree">sub2</li>
<li class="submenuthree">sub3</li>
</ul>
<li class="submenutwo">sub2</li>
<li class="submenutwo">sub3</li>
</ul>
</li>
<li>menu3</li>
</ol>
</div>

jQuery Menu Button Disappearing on drop down in webkit only, how do I make it stay put?

I have a problem involving jQuery drop downs. Basically the button which reveals the drop down dissapears upon revealing the drop down. Here is the code
The HTML included in the navigation
<div id="header">
<div id="navHolder">
<ul style="list-style: none;">
<li>Travel Blog</li>
<ul class="dropdown">
<li>Destination
<ul class="sub_menu">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</li>
</ul>
<li>Map</li>
<li>About</li>
</ul>
</div>
This is the javascript generating the drop down effect
$(function(){
var config = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
over: doOpen, // function = onMouseOver callback (REQUIRED)
timeout: 200, // number = milliseconds delay before onMouseOut
out: doClose // function = onMouseOut callback (REQUIRED)
};
function doOpen() {
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}
function doClose() {
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
}
$("ul.dropdown li").hoverIntent(config);
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});
And this is the CSS styling the buttons and drop down...
ul.dropdown { position: relative; list-style: none;}
ul.dropdown li { font-weight: bold; list-style: none; zoom: 1;}
ul.dropdown a:hover { color: #CCC; }
ul.dropdown a:active { color: #FFF; }
ul.dropdown li a { display: block; color: #FFF;}
ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover { color: #CCC; position: relative; }
ul.dropdown li.hover a { color: #FFF; text-decoration: none;}
ul.dropdown ul { width: 180px; background: url(images/transBlack_bg2.png) repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; visibility: hidden; position: absolute; top: 45px; right: 60px; }
ul.dropdown ul li { font-weight: bold; font-size: 13px; color: #FFF; padding: 5px;}
ul.dropdown ul li a { width: auto; display: inline-block; }
ul.dropdown ul li a:hover { color: #111;}
ul.dropdown ul ul { left: 100%; top: 0; }
ul.dropdown li:hover > ul { visibility: visible; }
Any advice or answers will be greatly appreciated, thanks very much for your time :)
The problem is you are using the pseudo hover class incorrectly. This link specifies how to use them properly. Your problem is this (from link): Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!! So your hover style is not behaving correctly. If you add these lines (adjusting as desired):
ul.dropdown li.hover a:link {color:#999}
ul.dropdown li.hover a:visited {color:#999}
before this line:
ul.dropdown li.hover a { color: #FFF; text-decoration: none;}
it will work as expected.
Edit: Also, using a class named hover along with the hover pseudo class makes the css pretty hard to decipher. I'd give the class you create a different name if possible.

Categories