$(document).ready(function(){
$("#menu-trigger").click(function(){
$("#menu").slideToggle();
});
});
#menu {
width: 100%;
height: 35px;
}
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
background: blue;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 10px 0 0;
position: relative;
background:blue;
}
ul.topnav li a {
color:red;
padding: 10px 5px;
float: left;
display:block;
font-size: 12px;
text-transform: uppercase;
font-style: normal;
}
ul.topnav li a:visited, ul.topnav li a:active, ul.topnav li a:link {
color: #fff;
text-decoration: none;
}
ul.topnav li a:hover {
background: violet;
color:white;
}
ul.subnav{
display:none;
position:absolute;
top:100%;
padding:0;
}
ul.subnav li{
list-style: none;
float:left;
width:100%;
}
ul.subnav a{
line-height:120%;
padding:10px 15px;
}
ul.topnav li:hover>ul.subnav{
display:block
}
#menu-trigger{
display:none;
}
#media screen and (max-width:600px){
#menu{
display:none;
}
#menu-trigger{
display:block;
}
ul.topnav li{
float:none;
}
ul.topnav li a{
float:none;
border-bottom:2px solid red;
}
}
<span id="menu-trigger">MENU</span>
<div id="menu">
<ul class="topnav">
<li><a>Home</a>
</li>
<li><a>About Us</a>
<ul class="subnav">
<li><a>Introduction</a>
</li>
<li><a>History</a>
</li>
<li><a>Mission/Vision Statement</a>
</li>
</ul>
</li>
<li><a>Basic Education</a>
<ul class="subnav">
<li><a>Introduction</a>
</li>
<li><a>The Basic Ed</a>
</li>
<li><a>About Basic Ed</a>
</li>
</ul>
</li>
<li><a>IB</a>
</li>
<li><a>College</a>
</li>
<li><a>Contact Us</a>
</li>
</ul>
</div>
I can't find what seems to be the problem in my code specifically in jQuery. The click and slideToggle event wont work. What I want is when the screen reach its max-width, horizontal menu will no longer show, instead when you click on MENU slide-up and down will toggle resulting in vertical and mobile friendly navigation menu. I simply followed some tutorials in Youtube but it doesn't work on me.
Try this:
$(document).ready(function(){
$("#menu-trigger").on('click', function(){
$("#menu").slideToggle();
});
});
here you can take a look how it's working when you click on the #menu-trigger link
Related
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.
I have a navigation bar with a drop down menu. I have a + in front of the drop down menu inside a span. I would like the the plus to toggle to - when the menu is dropped down and back to + when the menu is up(hidden). How can I do this?
my html looks like
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li class="shop"><span>+</span>Shop
<ul class="shopList">
<li>New Arrivals</li>
<li>Dresses</li>
<li>Jumpsuits</li>
</ul>
</li>
<li>Wholesale</li>
<li>Retailers</li>
<li>Contact</li>
</ul>
</nav>
I am currently using js to drop down my menu. Can I add to my current js to achieve this. My js looks like
$(document).ready(function() {
$('.shop').click(function() {
$('.shopList').slideToggle("fast");
});
});
here is my css
nav{
position:relative;
display:block;
width:70%;
margin:0;
padding:3px 15%;
border-top:1px solid #d0d0d0;
text-align:center;
font:15px 'OpenSans';
z-index: 999;
}
nav ul{
position:relative;
width:100%;
margin:0;
padding:0;
}
nav li{
display:inline-block;
margin:0 10px;
padding:0;
}
nav li ul li{
position:relative;
display:block;
width:150px;
margin:0;
padding:0;
}
.shopList{
position:absolute;
display:none;
width:100px;
margin:0 0 0 -50px;
padding:0;
}
nav a{
position:relative;
display:block;
width:auto;
margin:0;
padding:0;
color:#707070;
text-decoration:none;
}
One solution is to compare previous text with new:
$('.shop').click(function() {
$('.shopList').slideToggle("fast");
$("a span", this).text() == "+" ? $("a span", this).text("-") : $("a span", this).text("+");
});
nav {
position: relative;
display: block;
width: 70%;
margin: 0;
padding: 3px 15%;
border-top: 1px solid #d0d0d0;
text-align: center;
font: 15px'OpenSans';
z-index: 999;
}
nav ul {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin: 0 10px;
padding: 0;
}
nav li ul {
display: none;
}
nav li ul li {
position: relative;
display: block;
width: 150px;
margin: 0;
padding: 0;
}
.shopList {
position: absolute;
display: none;
width: 100px;
margin: 0 0 0 -50px;
padding: 0;
}
nav a {
position: relative;
display: block;
width: auto;
margin: 0;
padding: 0;
color: #707070;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li class="shop"><span>+</span>Shop
<ul class="shopList">
<li>New Arrivals
</li>
<li>Dresses
</li>
<li>Jumpsuits
</li>
</ul>
</li>
<li>Wholesale
</li>
<li>Retailers
</li>
<li>Contact
</li>
</ul>
</nav>
How can I create a dropdown menu similar to xenforo, which will automatically close after 2 seconds?
I've tried searching but unfortunately couldn't find any proper solution.
But I don't know how to and what code to put to achieve like; 1. The drop down menu open after 2 seconds if the mouse cursor hovers over the main menu link for 2 seconds. 2. The drop down closes if the mouse cursor is away from the drop down for 2 seconds.
Thanks!
Here is Jsfiddle;
Try this:
$(document).ready(function(){
$("#sub-menu li").hide(); // Hide in order to fadeIn to work
$("#main-menu ul").hover(
function(){
$("#sub-menu li").fadeIn(slow);
},
function(){
$("#sub-menu li").fadeOut(slow);
});
});
You can use jquery to use this functionality. Instead of waiting for 2 seconds you can use fade out slow so that users can know something will happen.
$(document).ready(function(){
$("#sub-menu").hide(); // Hide in order to fadeIn to work
$("#main-menu").hover(
function(){
$("#sub-menu").fadeIn(slow);
},
function(){
$("#sub-menu").fadeOut(slow);
});
});
<html>
<head>
<style>
.dd_menu {
background: none;
padding: 0px;
margin:0;
list-style-type:none;
height:10px;
border: none;
font-size: 11px;
font-family: "Candarab";
}
.dd_menu li {
background: none;
float: left !important;
height:20px;
margin-left: 1px;
margin-top: 4px;
}
.dd_menu li a {
padding: 15px 5px;
display:inline;
color:#000;
text-decoration:none;
font:11px arial, verdana, sans-serif;
}
.dd_menu li:hover a {
text-decoration:none;
padding: 15px 5px;
}
.dd_menu ul {
position:absolute;
left:-9999px;
top:9px;
list-style-type:none;
text-decoration: none;
float: left !important;
}
.dd_menu li:hover {
position:relative;
background:#176093;
text-decoration: none;
z-index: 1000;
}
.dd_menu li:hover ul {
left:0px;
top:20px;
background:lavender;
padding: 3px 3px;
border:1px solid grey;
width:160px;
text-decoration: none;
}
.dd_menu li:hover ul li {
height:18px;
border:none;
}
.dd_menu li:hover ul li a {
height:18px;
padding:0px;
display:block;
font-size:11px;
width:158px;
line-height:18px;
text-indent:5px;
color:#444;
background-color:lavender;
text-decoration:none;
border:1px solid transparent;
}
.dd_menu li:hover ul li a:hover {
height:18px;
background:silver;
color:#000;
float: left;
border:solid 1px #444;
}
</style>
</head>
<body>
<ul class="dd_menu">
<li>Main Menu <span class="smallesttext">▼</span>
<ul>
<div align="left">
<li>Drop Down Link</li>
<li>Drop Down Link</li>
<li>Drop Down Link</li>
<li>Drop Down Link</li>
<li>Drop Down Link</li>
</div>
</ul>
</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".dd_menu li a").hover(
function(){
$(".dd_menu li ul div li a").hide().fadeIn('slow');
},
function(){
});
$("ul div li").hover(
function(){
$(".dd_menu li ul div li a").show();
},
function(){
;
});
});
</script>
</body>
</html>
Try this. Similarly add what you want on mouse out. If it helped think about accepting the answer.
I can't get my submenu to stay/appear on the same line as its parent. I want it to be located within the transparent band that appears via mouse-over. I'm new to this, any advice is greatly appreciated.
Jsfiddle: http://jsfiddle.net/kn4Jx/
Exhibition should have a submenu with two links Current and Previous.
html:
<div>
<ul id="mainmenu">
<li id="liHome">
INFO
</li>
<li id="liServices" class="active">
EXHIBITIONS
<ul id="SubMenuY2" class="submenu">
<li>CURRENT</li>
<li>PREVIOUS</li>
</ul>
</li>
<li id="liEnvironment">
CV
</li>
<li id="liCareer">
NEWS
</li>
<li id="liContact">
MORE
</li>
</ul
</div>
and css:
body
{
background-color:#06F;background-size: 100%;
background-repeat:no-repeat;
}
#mainmenu
{
margin: 0;
padding: 0;
list-style-type: none;
position:relative;
}
#mainmenu li
{
clear: left;
position:relative;
}
#mainmenu a
{
display: block;
overflow: hidden;
float: left;
width:100%;
position:relative;
}
#mainmenu a:hover
{
background-position: 0 0;
background-color:clear;
background-color:rgba(255,255,255,0.5);
width:100%;
}
#mainmenu li.active a
{
background-position: 0 0;
background-color:clear;
width:100%;
}
.submenu
{
list-style-type: none;
float: left; display: none;
position:absolute;
right:900px;
top:0px;
}
#mainmenu li a:hover+.submenu, .submenu:hover
{
display:inline-block;
}
.submenu li
{
display: inline;
clear: none !important;
}
.submenu li a
{
float: right;
margin-left: 10px;
}
.maintextcolour
{
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color:#FFF;
text-decoration: none;
}
.maintextcolour:hover
{
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color:#0FF;
text-decoration: none;
}
Two small mistakes:
You have your .submenu absolutely positioned to right with
900px - so it's somewhere next to your monitor. Change it from
right to left and number 900px to 120px
List item from .submenu should be display like inline-block instead of inline
JSFiddle: http://jsfiddle.net/kn4Jx/4/
I have a menu
<div id="nav">
<ul>
<li><span>Home</span></li>
<li><span>About Us</span></li>
<li><span>What We Do</span>
<ul id="sideNav">
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>
</li>
<li><span>Studies</span></li>
</ul>
</div>
I am trying to create a pop out menu the CSS that does this is:
#nav ul{
padding: 0;
margin: 0;
}
#nav ul li{
list-style: none;
font-size: 16px;
width:170px;
padding:0px 0px 10px 0px;
}
#nav ul li ul li{
font-size: 13px;
}
#nav ul li ul{
display: none;
}
.showMenu, #nav ul li:hover ul{
width:220px;
padding:7px;
background: #F2F2F2;
border:1px solid #F2F2F2;
display: block;
position: absolute;
left: 85px;
top: 30px;
}
#nav ul li ul li{
padding:2px 0px 2px 0px;
}
I am tring to replace the items within both lists but they have different stlyes. I can replace the top level elements easy enough but its the pop out menu that I can not replace the links on.
my SIFR code:
sIFR.replace(futura, {
selector: '#nav ul li span',
css: ['.sIFR-root {}a{ color:#639463;text-decoration:none; font-size: 16px; font-weight:bold;} a:hover{color:#83C000;text-decoration:underline;}'],
wmode: 'transparent'
});
I think part of your problem is that sIFR needs displaying elements to act on.
If you can't use #font styles, I can telly ou that I've successfully used Cufon in this way on a small job, as seen here: http://www.reneworganicbeauty.com/
It's still a bit finicky, and colour changes take a bit of fiddling, but at least it works ok in menus.