I have the following bootstrap code which define our main menu navigation :-
<div class="col-xl-9 col-lg-9">
<div class="main-menu d-none d-lg-block">
<nav>
<ul id="navigation">
<li>home</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
but i need to make the current page underline using bootstrap if possible?
Put a class in the one that is active and in css give the underline to the class
Like this:
<li class="active">home</li>
css:
.active{
border-bottom: xxxx;
border-color:xxxx;
border-style:xxx;
}
You need some JavaScript for this. Basically, you need to add a class dynamically, e.g. active to your active <li> element and then add some styles to this class. Check this article for further details.
Related
I have a script that makes active menu item with moving line, but this is one-page and I want that during scroll active menu change. I tried diffrent scripts here but it doesn't work.
Here is the HTML code:
<div class="nav-container">
<ul class="menu">
<li><a class="active" href="#home">Home</a></li>
<li>Skup</li>
<li>Sprzedaż</li>
<li>Serwis</li>
<li>Kontakt</li>
<div id="line"></div>
</ul>
JS(on fiddle because stack wants more details) :
https://jsfiddle.net/6y6qj02y/
You are looking for the Scrollspy.
This is how you can do it:
I have a page with a horizontal navigation on top and above that is a header img. I'm using fullPage.js as my layout and by default navbar is always on top. I want my header img to appear only on the first section and be hidden everywhere else. I was thinking about a solution in jQuery which would be if I'm on every section but first header margin-top would be [header_img_height] and when I get to section one it would return to margin-top:0px.
My header markup right now:
<header>
<div id="header_banner">
</div>
<ul id="nav_cont">
<li data-menuanchor="section1">
<a id="home_hover" href="#section1">Home</a>
</li>
<li data-menuanchor="section2">
<a id="about_hover" href="#section2/1">About</a>
</li>
<li data-menuanchor="section3">
<a id="gallery_hover" href="#section3">Gallery</a>
</li>
<li data-menuanchor="section4">
<a id="literature_hover" href="#section4">Literature</a>
</li>
<li data-menuanchor="section5">
<a id="contact_hover" href="#section5">Contact</a>
</li>
</ul>
</header>
<div id="fullpage">
<div class="section" id="Home">
<div class="container"></div>
</div>
.
.
.
other sections
This is what I want to end up with:
I would recommend you to do it with CSS directly.
Check out this video tutorial in which you can see how to use the class added to the body element to fire your own CSS changes.
Otherwise, you can also do it using callbacks such as afterLoad or onLeave. You have an example of it available in the fullpage.js files.
You even have an example of how to use them in this Apple demo also available in the files to download.
Would this help? On the first section it adds the class fixed-header to your nav, and on the other sections it will disappear
$(function(){
$(window).scroll(function(){
var section1 = $('#home').offset().top;
var section2 = $('#section2').offset().top;
if($(this).scrollTop()>=section1){
$('#nav_cont').addClass('fixed-header');
}
if($(this).scrollTop()>=section2){
$('#nav_cont').removeClass('fixed-header');
}
});
});
I have a navigation menu that works well and looks good.
The HTML for the menu is:
<div id="menubar">
<div id="welcome">
<h1>Cedars Hair <span>Academy</span></h1>
</div><!--close welcome-->
<div id="menu_items">
<ul id="menu">
<li class="current">Home</li>
<li>The Salon</li>
<li>Testimonials</li>
<li>Courses</li>
<li>The Staff</li>
<li>Contact Us</li>
</ul>
</div><!--close menu-->
</div><!--close menubar-->
But I want to change it so it is something like:
<li>The Salon
<ul>
<li>Hair Cut</li>
</ul>
</li>
So under the salon, a drop down menu would come up with 'Hair Cut'.
I know this is possible with CSS, but the problem is I have a lot of CSS with the divs shown above (menubar, welcome, menu_items etc). Do you know the most simplest way to make a simple dropdown?
The simplest way in a nutshell:
https://jsfiddle.net/svArtist/2jd9uvx0/
hide lists inside other lists
upon hovering list elements, show the child lists
ul ul {
display:none;
display:absolute;
bottom:-100%;
}
li{
position:relative;
}
li:hover>ul {
display:table;
}
<ul>
<li>The Salon
<ul>
<li>Hair Cut
</li>
</ul>
</li>
</ul>
Why don't you use Jquery UI?
https://jqueryui.com/menu/
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
Added the sub menu using li:hover
Here is the fiddle - https://jsfiddle.net/gkdj6y5x/
I'm having some problems understanding the stracture of JQuery elements and how to move through the DOM tree.
My aim is to highlight (background color) the clicked link (a).
if the "li a" is inside ul which is not the main "menu" ul (meanning sub-menu link) then i want to highlight both the sub menu link and the top menu link.
My HTML code is:
<div id="site">
<div id="koteret">
<div id="top_menu">
<ul id="menu">
<li><a href="welcome.html" id="wel" title="HomePge" >home</a></li>
<li>read
<ul class="par">
<li><a href="welcome.html" id="b" title="title" >test</a></li>
<li>addRead</li>
</ul>
</li>
<li><a href="books.aspx" title="Books" >Books</a>
<ul class="par">
<li>Search</li>
<li>Register</li>
</ul>
</li>
<li><a href="contact.html" id="a" title="Contact" >CoNTACT</a></li>
</ul>
</div>
</div>
<div id="test">
<iframe id="con" src="welcome.html">ffffffffffffffffffffffffffffffsdfdsfsdfwefwfwfw
fwfwefwe<br />fwefwefw</iframe>
<div id="side_bar">fsfdsfsdf</div>
</div>
<div id="footer">footer</div>
</div>
</body>
As for the JQuery i tried this:
$(this).closest("ul").find("a").attr("id"));
and a few other versions with parents but i get "undefined" or empty strings when i check with alerts.
Can you help me understand where is my mistake?
I'm sure it's something very simple i just can't find it.
Thanks
To highlight the submenu link and its top most parent link use the following code:
$(this).css("background-color","red");
$(this).parents("li").last().find("a:first").css("background-color","red");
The first line highlights the link.
The second line will look for the top-most 'li' then select its immediate 'a' tag and highlight it
UPDATE:
To remove the highlight of the previous click use a CSS class:
.highlight {
background-color: red;
}
Then use the following code:
$("#menu").find(".highlight").removeClass('highlight');
$(this).addClass('highlight');
$(this).parents("li").last().find("a:first").addClass('highlight');
I've done a search both on here and via Google, I've tried all the codes that they have given me, and no success on any of them. I've got no idea at all why they don't work.
Basically when you scroll the page and reach the anchor link "about" I want "about" to be highlighted until you get to "events", etc.
<div id="menu-wrapper">
<div id="menu">
<ul>
<li class="logo"><img src="/images/ccky_logo.png" height="60"/></li>
<li>Home</li>
<li>About</li>
<li>Events</li>
<li>Team</li>
<li>Location</li>
<li>Contact</li>
</ul>
</div>
<!-- end #menu -->
</div>
Thanks!
You can use bootstrap's Scrollspy to achieve this effect: http://twitter.github.io/bootstrap/javascript.html#scrollspy
After you implemented the JavaScript plugin simply call it with $('#menu').scrollspy().
In your HTML, just add the data parameters bootstrap instructs you to use.