I've made a navigation bar with 4 elements(HOME, ABOUT, PROJECTS, CONTACT). Each element is an anchor tag with self id. I want by clicking on element to go on respectively section but I don't want my url to be like this #about or #contact
This is my code:
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
You can't do this in pure HTML, but you can implement something similar in Javascript.
Something like this that just scrolls the sections into view:
<ul>
<li>
Home
</li>
<li>
<a onclick="document.getElementById('about').scrollIntoView()">About</a>
</li>
<li>
<a onclick="document.getElementById('services').scrollIntoView()">Services</a>
</li>
<li>
<a onclick="document.getElementById('contact').scrollIntoView()">Contact</a>
</li>
</ul>
Or it might be better to define one function that you can call quickly like this:
<ul>
<li>
Home
</li>
<li>
<a onclick="scrollforme('about')">About</a>
</li>
<li>
<a onclick="scrollforme('services')">Services</a>
</li>
<li>
<a onclick="scrollforme('contact')">Contact</a>
</li>
</ul>
<script>
function scrollforme(sectionid){
document.getElementById(sectionid).scrollIntoView();
}
</script>
Related
I'm trying to console log a variable that should contain an array. However, in Codepen, it returns an empty array. I'm expecting it to return contents of the list item.
Here's the Codepen along w/ some snippet code:
This is a React project, btw, which is why I'm using className instead of class.
HTML
<ul className="nav">
<li>
<a>Products</a>
<div className="subnav-block">
<ul>
<li>
<a>Product A</a>
</li>
<li>
<a>Product B</a>
</li>
</ul>
</div>
</li>
<li>
<a>About</a>
<div className="subnav-block">
<ul>
<li>
<a>About Us</a>
</li>
<li>
<a>Press</a>
</li>
</ul>
</div>
</li>
</ul>
JS
const nav = document.querySelectorAll('.nav > li');
console.log(nav)
Codepen is returning:
[Object NodeList] {Length: 0}
Because className isn't how you add a HTML class - it's simply class.
const nav = document.querySelectorAll(".nav > li");
console.log(nav);
<ul class="nav">
<li>
<a>Products</a>
<div class="subnav-block">
<ul>
<li>
<a>Product A</a>
</li>
<li>
<a>Product B</a>
</li>
</ul>
</div>
</li>
<li>
<a>About</a>
<div class="subnav-block">
<ul>
<li>
<a>About Us</a>
</li>
<li>
<a>Press</a>
</li>
</ul>
</div>
</li>
</ul>
To keep using className, use an attribute selector:
const nav = document.querySelectorAll("[className='nav'] > li");
console.log(nav);
<ul className="nav">
<li>
<a>Products</a>
<div className="subnav-block">
<ul>
<li>
<a>Product A</a>
</li>
<li>
<a>Product B</a>
</li>
</ul>
</div>
</li>
<li>
<a>About</a>
<div className="subnav-block">
<ul>
<li>
<a>About Us</a>
</li>
<li>
<a>Press</a>
</li>
</ul>
</div>
</li>
</ul>
If this is in a react app make sure you are calling the code in the correct place so that the dom has actually been updated with your markup before the query is being called. If you are using a class component move your code inside componentDidMount
componentDidMount() {
const nav = document.querySelectorAll(".nav > li");
console.log(nav);
}
If you are using hooks place it inside useEffect
useEffect(() => {
const nav = document.querySelectorAll('.nav > li')
console.log(nav)
}, [])
here is a working example using hooks: https://codesandbox.io/s/currying-monad-t6104?fontsize=14
I am working on a mobile menu for this site:
http://giamberardino.com/_beta/team.html
When I click on "Showcase" it's toggle the slide of the entire menu as well as .mbl-dropdown. I would like it to just toggle the slide of .mbl-dropdown when .mbl-showcase is clicked on.
Where am I going wrong??
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
$(".mobile_menu_button").bind('click', function() {
$('.mobile_menu').slideToggle();
});
$(".mbl-showcase").bind('click', function() {
$('.mbl-dropdown').slideToggle();
$('.mobile_menu').stop().slideToggle();
});
First, You have to make it clear in your mind:
you have to hide the dropdown menu NOT the whole navbar , so you need to give the .mbl-dropdown a display:none.
then you just want to make the jquery code like that :
$(".mbl-showcase").on('click', function() {
$('.mbl-dropdown').slideToggle();
});
.mbl-dropdown{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
that means if you click on the element with class .mbl-showcase wich is "Showcase" the dropdown will show if it is hidden and it will be hidden if it is shown and that what does toggle mean.
make sure you check again the toggle property http://api.jquery.com/toggle/
I hope I helped you
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
.mbl-showcase ul{
display:none;
}
$("#menuItems li").on('click', function() {
$(this).find(".mbl-dropdown").slideToggle()
});
Fiddler https://jsfiddle.net/zeqy9zfo/
Here's the fiddle
I am trying to achieve something very simple when a listed item is clicked a new class has to be added to it, there are two identical menus, change of class needs to happen in both the menus even if the click occurs in single menu.
In the fiddle #e8e8e8 color is added to any listed item with class 'zm-active', currently it's on home and works for single menu, I want it to work on both the menus even if click happens on single menu.
Code:
JS:
$(document).ready(function() {
$('.zetta-menu li').on('click', changeClass);
});
function changeClass() {
$('.zetta-menu li').removeClass('zm-active');
$(this).addClass('zm-active');
}
HTML:
<nav id="fixedbar">
<ul onClick="" class="zetta-menu zm-response-switch zm-effect-slide-top">
<li class="zm-active zm-content-full">
<a href="#header-single-1">
Home
</a>
</li>
<li>
<a href="#about-10">
About
</a>
</li>
<li>
<a href="#services-18">
Services
</a>
</li>
<li>
<a href="#portfolio-19">
Portfolio
</a>
</li>
<li>
<a href="#team-19">
Team
</a>
</li>
<li>
<a href="#pricing-17">
Pricing
</a>
</li>
<li>
<a href="#blog-19">
Blog
</a>
</li>
<li>
<a href="#contact-1">
Contact
</a>
</li>
</ul><!-- /.zetta-menu -->
</nav><!-- /#fixedbar -->
<nav class="navbar navbar-single-1 center" role="navigation">
<div class="navbar-inner center">
<ul onClick="" class="zetta-menu zm-response-switch zm-effect-slide-top">
<li class="zm-active zm-content-full">
<a href="#header-single-1">
Home
</a>
</li>
<li>
<a href="#about-10">
About
</a>
</li>
<li>
<a href="#services-18">
Services
</a>
</li>
<li>
<a href="#portfolio-19">
Portfolio
</a>
</li>
<li>
<a href="#team-19">
Team
</a>
</li>
<li>
<a href="#pricing-17">
Pricing
</a>
</li>
<li>
<a href="#blog-19">
Blog
</a>
</li>
<li>
<a href="#contact-1">
Contact
</a>
</li>
</ul><!-- /.zetta-menu -->
</div><!-- /.navbar-inner -->
</nav><!-- /.navbar-single-1 -->
I am not very through in javascript/jquery, any help would be appreciated.
Is there something the links have in common? Of yourse! The href attribute (at least in your example).
So, you grab the href attribute of the link you clicked, by this attribute value you grab all links having the same href, and then you grab their parents (LI) in order to add class to them.
$(document).ready(function() {
$('.zetta-menu li a').click(function () {
var itemsToChange = $('li a[href="'+$(this).attr('href')+'"]').parent(),
allItems = $('.zetta-menu li');
allItems.removeClass('zm-active');
itemsToChange.addClass('zm-active');
});
});
JS Fiddle demo
I am new to javascript, forgive me asking the simple question.
Is there anyone could guide me how to use javascript to dynamically list different things when clicking different button.
For example: Like this link:
when I click the Brand development, ecommerce development, it will list all related items.
I create an example on jsFiddle, please check from here
The HTML content is like:
<ul class='product-catlogs'>
<li><a class='product'>All</a>
</li>
<li><a class='books'>Books</a>
</li>
<li><a class='mobiles'>Mobiles</a>
</li>
<li><a class='cars'>Cars</a>
</li>
<ul class='product-list'>
<li>
<div class='product books'>book1</div>
</li>
<li>
<div class='product books'>book2</div>
</li>
<li>
<div class='product books'>book3</div>
</li>
<li>
<div class='product mobiles'>Iphone</div>
</li>
<li>
<div class='product mobiles'>Sumsang</div>
</li>
<li>
<div class='product cars'>Mercedes</div>
</li>
<li>
<div class='product cars'>Toyota</div>
</li>
<li>
<div class='product cars'>Ford</div>
</li>
The js code is like:
$('.product-catlogs a').click(function (e) {
var tag = this.className;
$('ul li .' + tag).parent().show();
$('ul li div').not('.' + tag).parent().hide();
})
I am trying to make my header with the Ink framework (CSS/JS) fixed so it does not move on the page while scrolling and I can't seem to make it so.
HTML:
<div id="topbar">
<nav class="ink-navigation ink-grid hide-all show-large">
<ul class="menu horizontal flat blue">
<li>
Home
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item<i class="icon-caret-down"></i>
<ul class="submenu">
<li>
Submenu item
</li>
<li>
Submenu item
</li>
</ul>
</li>
</ul>
</nav>
<nav class="ink-navigation ink-grid hide-all show-medium show-small">
<ul class="menu vertical flat blue">
<li>
<a class="logoPlaceholder push-left" href="#" title="Site Title">Home</a>
<button class="toggle push-right" data-target="#topbar_menu" id="toggleVisibility">
<span class="icon-reorder"></span>
</button>
</li>
</ul>
<ul class="menu vertical flat blue hide-all" id="topbar_menu">
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li class="">
<a class="toggle" data-target=".submenu" href="#">Menu item<i class="icon-caret-down"></i></a>
<ul class="submenu hide-all dropdown">
<li>
Submenu item
</li>
<li>
Submenu item
</li>
</ul>
</li>
</ul>
</nav>
<div class="border">
</div>
</div>
I've looked and tried toggling around with the CSS package but could not get it going.
Any help would be appreciated!
are you using last version release or are you using the source from github?
In last version release we have a bug and it does not work if the element is wider than 90% of the viewport width.
Get the last build from https://github.com/sapo/Ink/tree/develop/dist and use:
<div id="topbar" data-offset-top="0" class="sticky" data-activate-in-layouts="large,medium,small">
....
attribute "data-activate-in-layouts" is optional to make it work in the selected viewport sizes.