I have a problem with my menu in mobile mode. onClick it fadesOut. I want to keep this setting, but I don't want it to fadeOut when one clicks on the dropdown part.
here is link: http://jsfiddle.net/zLLzrs6b/3/
appreciate your help!
html:
<nav id="nav-wrap"> <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>
<ul id="nav" class="nav">
<li><a class="smoothscroll mobile" href="#about">about</a>
</li>
<li><a class="smoothscroll mobile" href="#documents">blog</a>
</li>
<li class="nav-item">dropdown
<ul class="langop">
<li>otion 1
</li>
<li>otion 2
</li>
</ul>
</li>
</ul>
</nav>
css:
.langop {
display:none;
position: relative;
width:auto;
}
.nav-item:hover .langop {
display: block;
}
java:
var toggle_button = $("<a>", {
id: "toggle-btn",
html: "Menu",
title: "Menu",
href: "#"
});
var nav_wrap = $('nav#nav-wrap')
var nav = $("ul#nav");
nav_wrap.find('a.mobile-btn').remove();
nav_wrap.prepend(toggle_button);
toggle_button.on("click", function (e) {
e.preventDefault();
nav.slideToggle("fast");
});
if (toggle_button.is(':visible')) nav.addClass('mobile');
$(window).resize(function () {
if (toggle_button.is(':visible')) nav.addClass('mobile');
else nav.removeClass('mobile');
});
$('ul#nav li a').on("click", function () {
if (nav.hasClass('mobile')) nav.fadeOut('fast');
});
See this demo.
$('ul#nav > li > a').on("click", function () {
if (nav.hasClass('mobile'))
nav.fadeOut('fast');
});
Find the clicked element by using event.target, if it's dropdown part then don't hide
var toggle_button = $("<a>", {
id: "toggle-btn",
html: "Menu",
title: "Menu",
href: "#"
});
var nav_wrap = $('nav#nav-wrap')
var nav = $("ul#nav");
nav_wrap.find('a.mobile-btn').remove();
nav_wrap.prepend(toggle_button);
toggle_button.on("click", function(e) {
e.preventDefault();
nav.slideToggle("fast");
});
if (toggle_button.is(':visible')) nav.addClass('mobile');
$(window).resize(function() {
if (toggle_button.is(':visible')) nav.addClass('mobile');
else nav.removeClass('mobile');
});
$('ul#nav li a').on("click", function(e) {
var target = $(".langop");
if (!target.is(e.target) //checking clicked item is the dripdown list
&& target.has(e.target).length === 0 //chekking clicked element is inside the dropdown
&& nav.hasClass('mobile')) {
nav.fadeOut('fast');
}
});
.langop {
display: none;
position: relative;
width: auto;
}
.nav-item:hover .langop {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>
<ul id="nav" class="nav">
<li><a class="smoothscroll mobile" href="#about">about</a>
</li>
<li><a class="smoothscroll mobile" href="#documents">blog</a>
</li>
<li class="nav-item">dropdown
<ul class="langop">
<li>otion 1
</li>
<li>otion 2
</li>
</ul>
</li>
</ul>
</nav>
Related
This is the navbar html code:
<nav id="navbar">
<ul class="menu">
<li class="logo"><img src="img/LOGO JS BLANCO PNG.png"></li>
<li class="item">Home</li>
<li class="item">About</li>
<li class="item">Portfolio</li>
<li class="item">Knowledge</li>
<li class="item">Experience</li>
<li class="item">Contact</li>
<li class="toggle"><i class="fas fa-bars"></i></li>
</ul>
</nav>
This is the navbar js code:
const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
/* Toggle mobile menu */
function toggleMenu() {
if (menu.classList.contains("active")) {
menu.classList.remove("active");
toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
} else {
menu.classList.add("active");
toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
}
}
/* Event Listeners */
toggle.addEventListener("click", toggleMenu, false);
for (let item of items) {
item.addEventListener("keypress", toggleItem, false);
}
I want navbar to be closed when I click on a menu option. Any solution here? thanks
You can add the click to the menu instead of just the .toggle link
const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
/* Toggle mobile menu */
function toggleMenu() {
menu.classList.toggle("active");
const icon = toggle.querySelector("a i.fas");
icon.classList.toggle('fa-bars');
icon.classList.toggle('fa-times');
}
/* Event Listeners */
menu.addEventListener("click", toggleMenu, false);
#navbar .item {
display: none;
}
#navbar .menu.active .item {
display: list-item;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<nav id="navbar">
<ul class="menu">
<li class="logo">
<img src="img/LOGO JS BLANCO PNG.png">
</li>
<li class="item">Home</li>
<li class="item">About</li>
<li class="item">Portfolio</li>
<li class="item">Knowledge</li>
<li class="item">Experience</li>
<li class="item">Contact</li>
<li class="toggle"><i class="fas fa-bars"></i></li>
</ul>
</nav>
This is a single-page website currently I am working on. But When I click another link in the navbar it's not changing color though hovering is working perfectly. Here is my html code :
<html>
<body>
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 ">
<li class="nav-item ">
<a class="nav-link scroll active " aria-current="page" href="#intro">Home</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#about">About Us </a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#">Products</a>
</li>
</ul>
</div>
</html>
</body>
enter image description here
Here is my css:
<style>
.navbar .nav-item a {
color: #5cbf8f !important;
}
.navbar .nav-item a:hover {
color: #028b77 !important;
}
.navbar .nav-item a.active {
color: #028b77 !important;
}
</style>
enter image description here
Here is my Js :
<script>
$(document).ready(function () {
var scrollLink = $(".scroll");
// Smooth scrolling
scrollLink.click(function (e) {
e.preventDefault();
$("body,html").animate(
{
scrollTop: $(this.hash).offset().top,
},
1000
);
});
// Active link switching
$(window).scroll(function () {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function () {
var sectionOffset = $(this.hash).offset().top - 20;
if (sectionOffset <= scrollbarLocation) {
$(this).parent().addClass("active");
$(this).parent().siblings().removeClass("active");
}
});
});
});
</script>
enter image description here
N.B: Don't really know about js, just found it on the internet.
Navbar:
enter image description here
I think your js is wrong.
$('.active').removeClass('active');
$(this).addClass('active');
More efficient options are available if the DOM hierarchy is known.
For example, if they're all siblings, you can use this:
$(this).addClass('active').siblings('.active').removeClass('active');
I want to disable main menu item in sub page using it's id. Tried "setAttribute" and "disabled" options.
document.getElementById("bloc_menu:j_id14").setAttribute("disabled","disabled");
document.getElementById("bloc_menu:j_id14").disabled = true;
Any suggestions are welcome, thank u.
I'm still not 100% sure what you're trying to do or why you can't handle this serverside, but I've made a little example of a simple menu that can be disabled/enabled.
var $mainMenu, $links;
$(function() {
$mainMenu = $('#main-menu');
$links = $mainMenu.find('.menu-item__link').each(function() {
var $link = $(this);
$link.data('href', $link.attr('href'));
});
$('#toggle-main-menu').on('click', function() {
toggleMainMenu();
});
});
function toggleMainMenu() {
if ($mainMenu.hasClass('disabled')) {
$mainMenu.removeClass('disabled');
restoreLinks();
}
else {
$mainMenu.addClass('disabled');
removeLinks();
}
}
function removeLinks() {
$links.removeAttr('href');
}
function restoreLinks() {
$links.each(function() {
var $link = $(this);
$link.attr('href', $link.data('href'));
});
}
#main-menu .menu-item__link {
color: #000;
}
#main-menu.disabled .menu-item__link {
color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="main-menu">
<li class="menu-item">
<a class="menu-item__link" href="#someLink1">Some link 1</a>
</li>
<li class="menu-item">
<a class="menu-item__link" href="#someLink2">Some link 2</a>
</li>
<li class="menu-item">
<a class="menu-item__link" href="#someLink3">Some link 3</a>
</li>
</ul>
<button id="toggle-main-menu">Toggle the menu</button>
I have a site (www.mhk.me). In this site(html) navigation bar focus is change when the page change.
But now I am going make a back-end of this site (Converting on php).
I made a file name(Navigation.php) and then I include with all file.
The problem is that in php site the focus in this is always on HOME not change to other navigation when I change the page.
<div class="navbar-collapse nav-main-collapse collapse">
<div class="container">
<nav class="nav-main mega-menu">
<ul class="nav nav-pills nav-main" id="mainMenu">
<li class="active">
<a class="dropdown-toggle" href="index.html">
Home
</a>
</li>
<li>
<a class="dropdown-toggle" href="about.html">
About Me
</a>
</li>
<li>
<a class="dropdown-toggle" href="services.html">
Services
</a>
</li>
<li>
<a class="dropdown-toggle" href="portfolio.html">
Portfolio
</a>
</li>
<li>
<a class="dropdown-toggle" href="http://demo.mhk.me">
My Templates
</a>
</li>
<li>
<a class="dropdown-toggle" href="contact.html">
Contact
</a>
</li>
</ul>
</nav>
</div>
</div>
You will need a script that can compare the url ,so that you can assign .active class to the menu.
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
$(".nav-main li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' ){
$(this).parent().addClass("active");}
if($(this).attr("href") == 'index.php' && pgurl == '' ) {
$(this).parent().addClass("active");
}
})
});
Math3w, Your code need to be slightly changed.
$(function () {
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$(".nav-main li a").each(function () {
if ($(this).attr("href") == pgurl) {
$(this).parent().addClass("active");
}
if ((($(this).attr("href") == 'index.php')||($(this).attr("href") == '')) && (pgurl == '')) {
$(this).parent().addClass("active");
}
})
});
<html>
<head>
<style>ul{
list-style:none;
}
li{
cursor:pointer;
float:left;
padding:10px;
background-color:grey;
border-radius:5px;
margin:10px;
}
ul>.active{
background-color:green;
}
</style>
</head>
<body><nav>
<ul class="nav-main">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function () {
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$(".nav-main li a").each(function () {
if ($(this).attr("href") == pgurl) {
$(this).parent().addClass("active");
}
if ((($(this).attr("href") == 'index.php')||($(this).attr("href") == '')) && (pgurl == '')) {
$(this).parent().addClass("active");
}
})
});
</script>
</body>
</html>
Save the above code as index.php or about.php or contact.php and check the output.
When I open a menu item that is accordion style in the left side navigation, the menu container will not push the height of the parent container. I am not sure why this is the case. I would like to create the effect that when the side-bar height increases, so does the parent container's. How can I accomplish this? Thanks for any help.
EDIT: I can post the CSS specific to the menu, but it is fairly long. Let me know if it is needed.
HTML:
<div class="content-container">
<div id="side-nav-container">
<div id='cssmenu'>
<ul>
<li><a href='/index'><span>Home</span></a></li>
<li><a href='#'><span>Landscaping</span></a>
<ul>
<li><a href='#'><span>Planters</span></a></li>
<li><a href='#'><span>Walls</span></a></li>
<li><a href='#'><span>Stone Work</span></a></li>
<li><a href='#'><span>Walkways</span></a></li>
<li><a href='#'><span>Stairways</span></a></li>
<li><a href='#'><span>Steps</span></a></li>
<li><a href='#'><span>Water Falls</span></a></li>
<li><a href='#'><span>Ponds</span></a></li>
<li><a href='#'><span>Creek Beds</span></a></li>
<li><a href='#'><span>Pondless Water Features</span></a></li>
<li><a href='#'><span>Enhancement Lighting</span></a></li>
<li><a href='#'><span>Patios</span></a></li>
<li><a href='#'><span>Fireplaces</span></a></li>
</ul>
</li>
<li><a href='#'><span>Lawn Care</span></a>
<ul>
<li><a href='#'><span>Mowing</span></a></li>
<li><a href='#'><span>Fertilization & Weeding</span></a></li>
<li><a href='#'><span>Fall and Spring Cleanup</span></a></li>
<li><a href='#'><span>Shrub Trimming</span></a></li>
</ul>
</li>
<li><a href='#'><span>Irrigation</span></a>
<ul>
<li><a href='#'><span>Installation</span></a></li>
<li><a href='#'><span>Design</span></a></li>
<li><a href='#'><span>Maintenance</span></a></li>
</ul>
</li>
<li><a href='#'><span>Porous Pave</span></a>
<ul>
<li><a href='#'><span>Walkways</span></a></li>
<li><a href='#'><span>Patios</span></a></li>
<li><a href='#'><span>Pools</span></a></li>
<li><a href='#'><span>Playgrounds</span></a></li>
</ul>
</li>
<li><a href='#'><span>Demo Dumpsters</span></a></li>
<li><a href='#'><span>Outdoor Kitchens</span></a>
<ul>
<li><a href='#'><span>Italian Pizza Ovens</span></a></li>
<li><a href='#'><span>Kitchens</span></a></li>
<li><a href='#'><span>BBQs</span></a></li>
</ul>
</li>
<li><a href='#'><span>Products & Rentals</span></a>
<ul>
<li><a href='#'><span>Pond Supplies</span></a></li>
<li><a href='#'><span>Split fire wood splitters</span></a></li>
<li><a href='#'><span>Altoz Precision Mowers</span></a></li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div id="contact-info">
<p><strong>Phone</strong><br />
(218) 759-2376
</p>
<br />
<p><strong>Email</strong><br />
info#tkoutdoors.com
</p>
</div>
<img src="/_images/layout/Request-Quote-Btn.jpg" alt="request a quote" />
</div>
<div id="content">
{tag_pagecontent}
</div>
</div>
Sass:
div.content-container{
width: 100%;
height: auto;
margin-top: 1em;
overflow: hidden;
background-color: #FAF8F0;
padding: 0.5em;
position: relative;
#side-nav-container{
width: 215px;
padding: 1em 0.25em;
float: left;
background-color: #F2F0CE;
overflow: hidden;
position: relative;
#contact-info{
padding: 1em 0;
width: 85%;
margin: 0 auto;
}
}
}
Live Site: http://www.tkoutdoors.com
I see with Firebug that there is an inline stlye height of 856px in #side-nav-container. Remove that and it should work.
EDIT: The height is being set in the last part of your scripts.js.
EDIT2: This is your actual scripts.js:
jQuery(document).ready(function () {
$("#nav_1487666 li a").mouseover(function () {
$(this).parent().prev().find("a").css("border-bottom", "none")
}), $("#nav_1487666 li a").mouseout(function () {
$(this).parent().prev().find("a").css("border-bottom", "1px solid #790C0E")
}), $("#cssmenu > ul > li > a").click(function () {
var a = $(this).next();
return $("#cssmenu li").removeClass("active"), $(this).closest("li").addClass("active"), a.is("ul") && a.is(":visible") && ($(this).closest("li").removeClass("active"), a.slideUp("normal")), a.is("ul") && !a.is(":visible") && ($("#cssmenu ul ul:visible").slideUp("normal"), a.slideDown("normal")), 0 == $(this).closest("li").find("ul").children().length ? !0 : !1
}), $(function () {
var a = $("#content").height(),
b = $("#side-nav-container").height();
a > b ? $("#side-nav-container").css("height", a) : $("#content").css("height", b)
})
});
Take a look at the $("#cssmenu > ul > li > a") click function. You are using slideUp/slideDown to do the accordion effect. Those functions, have a second parameter which executes when the animation is complete. So you need to do something like this:
function menuHeight() {
$('#side-nav-container').height('auto');
$('#content').height('auto');
var a = $("#content").height(),
b = $("#side-nav-container").height();
a > b ? $("#side-nav-container").css("height", a) : $("#content").css("height", b);
}
And on every slideUp/Down:
a.slideUp("normal", function() {
menuHeight();
})
Remove this:
$(function () {
var a = $("#content").height(),
b = $("#side-nav-container").height();
a > b ? $("#side-nav-container").css("height", a) : $("#content").css("height", b)
})
And replace it with:
menuHeight();
That's all, didn't try it, but it should work.