hey I'm having a little issue. Right now my navigator bar just take me to sections on my page. I did it using id which will connect the a tag to a specific section.
I get to see the # char with the section name on the url for example:
http://orelhindi.s3-website.us-east-2.amazonaws.com/#skills
is there a way to make it dissapear?
<div class="menu">
<ul>
<li>About</li>
<li>cv</li>
<li>skills</li>
<li>portfolio</li>
<li>contact</li>
</ul>
</div>
....
<section id="skills" data-aos="fade-right">
<ul>
<li><i class="fab fa-java"></i></li>
<li><i class="fab fa-js-square"></i></li>
<li><i class="fab fa-node"></i></li>
<li><i class="fab fa-angular"></i></li>
<li><i class="fab fa-html5"></i></li>
<li><i class="fab fa-css3-alt"></i></li>
<li><i class="fab fa-git"></i></li>
<li><i class="fab fa-aws"></i></li>
</ul>
</section>
thanks a lot!
Technically yes: How to modify the URL without reloading the page?. Or you need to implement the scroll in JavaScript, making your life slightly more difficult.
And the # is useful, if someone shares the link anyone clicking on it will scroll to the correct place on the page.
Alternative to Bob's answer. You can use JS to listen for the clicks and scroll the element into view.
Change all href to data-section-id
Using JS: query those a[data-section-id] elements
Add click event listener
Find the element with same id as data-section-id, and scroll it into view
Worth noting the support for scrollIntoView.
// When DOM is ready
document.addEventListener("DOMContentLoaded", function() {
// Get all `a` elements with `data-section-id`
document.querySelectorAll("a[data-section-id]").forEach(aElement => {
// Add click event listener
aElement.addEventListener("click", event => {
// Store the element with `id` matching `data-section-id`
const scrollToElement = document.getElementById(event.target.dataset.sectionId);
// If element is not null, scroll to it
if (scrollToElement !== null) {
scrollToElement.scrollIntoView();
}
});
});
});
<div class="menu">
<ul>
<li><a data-section-id="about">About</a></li>
<li><a data-section-id="cv">cv</a></li>
<li><a data-section-id="skills">skills</a></li>
<li><a data-section-id="portfolio">portfolio</a></li>
<li><a data-section-id="contact">contact</a></li>
</ul>
</div>
....
<section id="skills" data-aos="fade-right">
<ul>
<li><i class="fab fa-java"></i></li>
<li><i class="fab fa-js-square"></i></li>
<li><i class="fab fa-node"></i></li>
<li><i class="fab fa-angular"></i></li>
<li><i class="fab fa-html5"></i></li>
<li><i class="fab fa-css3-alt"></i></li>
<li><i class="fab fa-git"></i></li>
<li><i class="fab fa-aws"></i></li>
</ul>
</section>
Related
i just want to ask what will be the best approach for my navbar. I manage to make my nav bar turn into icons on the left whenever i click on the toggle button. but when I suddenly enlarge my screen while the icons on the left is visible , my navbar returns to normal on the top but missing the label just the icons only.
<nav class="navbar">
<div class="max-width">
<div class="logo">D.N.A <span>Builders</span></div>
<ul class="menu">
<li><i class="fa fa-home fa-fw" aria-hidden="true"></i><span> Home</span></li>
<li><i class="fa fa-question-circle" aria-hidden="true"></i><span> About</span></li>
<li><i class="fa fa-wrench" aria-hidden="true"></i><span> Services</span></li>
<li><i class="fa fa-cog" aria-hidden="true"></i><span> Skills</span></li>
<li><i class="fa fa-users" aria-hidden="true"></i><span> Teams</span></li>
<li><i class="fa fa-phone" aria-hidden="true"></i><span> Contact</span></li>
</ul>
<div class="menu-btn">
<i class="fa fa-bars"></i>
</div>
</div>
</nav>
js:
$('.menu-btn').click(function() {
$('.navbar .menu').toggleClass("active");
$('.menu-btn i').toggleClass("active");
})
});
$(document).ready(function(){
$(".menu-btn").click(function(){
$(".menu span").toggle();
});
});
Maybe this is because you applied the active class on button's click event, try doing this at window's resize one.
Or, if you want to use bootstrap utilities, use its Grid system layout: https://getbootstrap.com/docs/5.0/layout/grid/
I am trying to use this theme: https://colorlib.com/polygon/sufee/index.html
This is the HTML it is using:
<ul class="nav navbar-nav">
<li class="active">
<i class="menu-icon fa fa-dashboard"></i>Dashboard
</li>
<h3 class="menu-title">UI elements</h3><!-- /.menu-title -->
<li class="menu-item-has-children dropdown show">
<i class="menu-icon fa fa-laptop"></i>Components
<ul class="sub-menu children dropdown-menu show">
<li><i class="fa fa-puzzle-piece"></i>Buttons</li>
<li><i class="fa fa-id-badge"></i>Badges</li>
<li><i class="fa fa-bars"></i>Tabs</li>
<li><i class="fa fa-share-square-o"></i>Social Buttons</li>
<li><i class="fa fa-id-card-o"></i>Cards</li>
<li><i class="fa fa-exclamation-triangle"></i>Alerts</li>
<li><i class="fa fa-spinner"></i>Progress Bars</li>
<li><i class="fa fa-fire"></i>Modals</li>
<li><i class="fa fa-book"></i>Switches</li>
<li><i class="fa fa-th"></i>Grids</li>
<li><i class="fa fa-file-word-o"></i>Typography</li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-table"></i>Tables
<ul class="sub-menu children dropdown-menu">
<li><i class="fa fa-table"></i>Basic Table</li>
<li><i class="fa fa-table"></i>Data Table</li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-th"></i>Forms
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-th"></i>Basic Form</li>
<li><i class="menu-icon fa fa-th"></i>Advanced Form</li>
</ul>
</li>
<h3 class="menu-title">Icons</h3><!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-tasks"></i>Icons
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-fort-awesome"></i>Font Awesome</li>
<li><i class="menu-icon ti-themify-logo"></i>Themefy Icons</li>
</ul>
</li>
<li>
<i class="menu-icon ti-email"></i>Widgets
</li>
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-bar-chart"></i>Charts
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-line-chart"></i>Chart JS</li>
<li><i class="menu-icon fa fa-area-chart"></i>Flot Chart</li>
<li><i class="menu-icon fa fa-pie-chart"></i>Peity Chart</li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-area-chart"></i>Maps
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-map-o"></i>Google Maps</li>
<li><i class="menu-icon fa fa-street-view"></i>Vector Maps</li>
</ul>
</li>
<h3 class="menu-title">Extras</h3><!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-glass"></i>Pages
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-sign-in"></i>Login</li>
<li><i class="menu-icon fa fa-sign-in"></i>Register</li>
<li><i class="menu-icon fa fa-paper-plane"></i>Forget Pass</li>
</ul>
</li>
</ul>
It is pretty standard. Now I want to add second level of dropdown i.e below Buttons I want to have it's items as Button 1, Button 2, Button 3
so I try to put this HTML there:
<li class="menu-item-has-children dropdown">
<a href="#" class="active" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-puzzle-piece fa-2x"></i> Buttons</a>
<ul class="sub-menu children dropdown-menu">
<li>
<a>Button 1</a>
</li>
<li>
<a>Button 2</a>
</li>
<li>
<a>Button 3</a>
</li>
</ul>
</li>
Button when I click on Buttons to open up it's dropdown it instead closes the parent. What am I doing wrong?
Any help is appreciated.
The only way to solve this issue is to add javascript.
Add this to your js file:
$('.menu-item-has-children .menu-item-has-children a').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
Reference:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h
As you have not update any fiddle yet. Watching to your code what I have found wrong is with the class attribute which you have mentioned multiple times
<a href="#" class="active" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-puzzle-piece fa-2x"></i> Buttons</a>
on above code you are using two classes remove class="active" and then try Hope it will help
I wish to fade in a share link when clicked on a share icon, but the problem am having is that they are many of them, it is like a post and am using a common class to fade in the links, when i click on one icon all the share link fades in, is there any way to fade in the link per each post, am trying to keep my code dry.
<div class="first-post">
<li class="fire-share"><i class="fa fa-share-alt"></i>
<ul class="shareo">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
</li>
</div>
<div class="second-post">
<li class="fire-share"><i class="fa fa-share-alt"></i>
<ul class="shareo">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
</li>
</div>
$('.fire-share').click(function(){
$('.shareo').fadeToggle()
})
I have tried using .each() but it still throws up the same problem, if i use different classes or id's it works fine but a post of many numbers, its not dry
$('.fire-share').click(function(){
$('.shareo').each(function(i,obj){
$(this).fadeToggle()
})
})
Use this context to tell the clicked element
Use find to search for the specific element that is within the parent element
$('.fire-share').click(function(){
$(this).find('.shareo').fadeToggle()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first-post">
<li class="fire-share"><i class="fa fa-share-alt"></i>
<ul class="shareo">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
</li>
</div>
<div class="second-post">
<li class="fire-share"><i class="fa fa-share-alt"></i>
<ul class="shareo">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
</li>
</div>
routes/map.js
model() {
return this.store.findAll('entity');
},
setupController(controller, model) {
var self = this;
controller.set('lat', 39.000000000000000);
controller.set('lng', 25.000000000000000);
controller.set('zoom', 3);
},
this my template
<div class="menu-btn ">☰</div>
<nav class="pushy pushy-left">
<div class="profile">
<div class="avatar"><img src="{{rootURL}}/assets/img/avatar/ava_16.jpg" alt="#"><span>5</span></div>
<h3>Ananew Matvey</h3>
</div>
<ul class="side_menu">
<li><i class="fa fa-bookmark-o"></i>Promo page</li>
<li><i class="fa fa-map-marker"></i>Map</li>
<li><i class="fa fa-list"></i>Place list</li>
<li><i class="fa fa-th"></i>Place grid</li>
<li><i class="fa fa-building-o"></i>Place</li>
<li><i class="fa fa-user"></i>User profile</li>
<li><i class="fa fa-book"></i>Blog</li>
<li><i class="fa fa-file-powerpoint-o"></i>Open post</li>
</ul>
</nav>
when i remove the model hook
the navbar work good but if i use hook model function it doesn't do any thing
My problem is when I click on the #topmenu it conflict's with another menu that I have
I want to open children UL element when li is clicked
Javascript Code:
$("#topmenu").click(function(){
$(".treeview-menu").addClass("treeview-menu open").toggle();
});
HTML
<ul class="sidebar-menu" id="treeview-menu">
<li class="treeview" id="topmenu">
<a href="#"><i class="fa fa-table"></i><span>Financeiro</span>
<i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i>Pagamentos</li>
<li><i class="fa fa-circle-o"></i>Relatórios</li>
</ul>
</li>
<li class="treeview" id="topmenu">
<a href="#"><i class="fa fa-table"></i><span>Financeiro</span>
<i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i>Pagamentos</li>
<li><i class="fa fa-circle-o"></i>Relatórios</li>
</ul>
</li>
</ul>
You have medley of IDs with same names.
Use classes for common JS behavior.
$(".treeview").click(function(){
$(this).find(".treeview-menu").addClass("open").toggle();
});
Changed the class name and id name of 2nd ul and li tag. Works fine
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<ul class="sidebar-menu" id="treeview-menu">
<li class="treeview" id="topmenu">
<a href="#"><i class="fa fa-table"></i><span>Financeiro</span>
<i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i>Pagamentos</li>
<li><i class="fa fa-circle-o"></i>Relatórios</li>
</ul>
</li>
<li class="treeview1" id="topmenu1">
<a href="#"><i class="fa fa-table"></i><span>Financeiro</span>
<i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu1">
<li><i class="fa fa-circle-o"></i>Pagamentos</li>
<li><i class="fa fa-circle-o"></i>Relatórios</li>
</ul>
</li>
</ul>
<script>
$(document).ready(function(){
$(document).ready(function(){
$("#topmenu").click(function(){
$(".treeview-menu").addClass("treeview-menu open").toggle();
});
$("#topmenu1").click(function(){
$(".treeview-menu1").addClass("treeview-menu open1").toggle();
});
});
</script>
</body>
</html>