I'm sorry if the question title isn't specific enough... but I really have no idea about the name of the feature I'm aiming here...
Here is the basic stuff at jsfiddle
<style>
body { margin: 0; text-align: center; }
ul { margin: 0; padding: 0; list-style: none; position: fixed; top: 0; width: 100%; display: flex; }
li { flex: 1; padding: 10px; border-bottom: 1px solid black; background: #fff; }
.current { background-color: #eee; }
#content { margin-top: 50px; }
#content > div { padding: 500px 15px; }
#content > div + div { border-top: 1px solid black; }
</style>
<ul id="nav">
<li id="nav-1" class="current">No.1</li>
<li id="nav-2">No.2</li>
<li id="nav-3">No.3</li>
<li id="nav-4">No.4</li>
<li id="nav-5">No.5</li>
</ul>
<div id="content">
<div id="content-1">#01: “First Chapter”</div>
<div id="content-2">#02: “Second Chapter”</div>
<div id="content-3">#03: “Third Chapter”</div>
<div id="content-4">#04: “Fourth Chapter”</div>
<div id="content-5">#05: “Fifth Chapter”</div>
</div>
When the top of the viewport haven't passed #content-2, #nav-1 would have the 'current' class.
When the viewport passed #content-2, #nav-1 would lose the 'current' class and #nav-2 would get the 'current' class.
and so on.
Some of the sites which I've seen using such feature are all using specific scripts, where one would need to made minor changes to the javascript when the number on objects in the content/nav changed.
I'm hoping to know a script where it could handle dynamic number of objects in the content/nav.
Can anyone show me how to do it?
Thank You.
This should be what you're looking for :
Javascript
$(document).ready(function(){
$(window).scroll(function(e){
for (var i = 1; i < $('#nav li').length; i++) {
if($(window).scrollTop() > $('#content-'+i).position().top){
$('#nav li').removeClass('current');
$('#nav-'+i).addClass('current');
}
};
})
});
http://jsfiddle.net/f7fg9t6e/1/
Do not forget to add jQuery to your project ;)
Related
Edit: I added the windo scroll function I make it but the contents under tabs goes over from it. How can I fix that?
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
console.log(true);
$(".tabs").addClass("tabs-position");
} else {
console.log(false);
$(".tabs").removeClass("tabs-position");
}
});
.tabs-position {
margin-bottom: 50px;
position:sticky;
top: 0;
background-color: red;
}
I have a page with a navbar and tabs. When I click them I direct the user to the section in the same page using the id attribute, however my tabs are in the middle of my page which is fine. What I am trying to achieve is to move them under my navbar section when I click them.
I tried after attribute but I don't get it. I have included my code below, How can I replace their position?
<section class="tabs">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="tab-outer">
<div class="tab-list">
<ul>
<li>
Rooms
</li>
<li>
info tab
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
.tabs {
margin-bottom: 50px;
.tab-outer {
border-bottom: 4px solid #f5f5f5;
position: sticky;
top: 70px;
padding: 20px 0 0 0;
}
.tab-list {
a {
color: #4a4947;
}
ul {
padding: 0 30px;
display: flex;
justify-content: space-between;
list-style-type: none;
}
}
}
You cannot nest CSS like that. Instead, use to select siblings at any level. And also, you have to put position:sticky on the direct sibling of an element that is being scrolled.
.tabs {
margin-bottom: 50px;
position: sticky;
top: 0;
background-color: #ffffff;
}
.tabs .tab-outer {
border-bottom: 4px solid #f5f5f5;
top: 70px;
padding: 20px 0 0 0;
}
.tabs .tab-list a {
color: #4a4947;
}
.tabs .tab-list ul {
padding: 0 30px;
display: flex;
justify-content: space-between;
list-style-type: none;
}
<section class="tabs">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="tab-outer">
<div class="tab-list">
<ul>
<li>
Rooms
</li>
<li>
info tab
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<div style="height:3600px;width:100%;background-color:blue;color:white;">foo</div>
By using z-index I fixed the problem
.tabs-position {
margin-bottom: 50px;
position:sticky;
top: 0;
background-color: red;
z-index: 1;
}
I understand this seems to be a common request but after digging through several posts I can't find a solution and/or lack the knowledge to tailor the javascript to my needs.
I am looking for a way to have my Navbar stick to the top of the page once it reaches the top (scrolling far enough down). The issues I have is that my Navbar is currently positioned using flex, and not already at the top of the page.
CODEPEN
* {margin:0;padding:0;box-sizing:border-box}
html, body {text-align: center;}
#logo2 img {
margin: 0 auto;
margin-top: 3%;
}
.menu2 {
display: flex; /* displays children inline */
margin: 0;
width: 100%;
margin-top: 2%;
list-style-type: none;
background: linear-gradient(#3E3E3E, #2B2B2B);
}
li {
flex: 1; /* each takes as much width as it can, i.e. 25% */
border-right: 1px solid #232323;
}
li:last-child {
border: none;
}
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 20px 0;
}
li a:hover {
background: linear-gradient(#404040, #3E3E3E);
}
.active {
background: linear-gradient(#2B2B2B, #232323);
}
<header id="logo2">
<img src="logo.png" alt="Logo"/>
</header>
<nav>
<ul id="navigation" class="menu2">
<li>HOME</li>
<li class="active">GALLERY</li>
<li>ART</li>
<li>CONTACT</li>
</ul>
</nav>
</body>
Well I eventually found an answer to my question. For those of you interested.
JS
var num = 240; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu2').addClass('fixed');
$('.main').addClass('main2');
} else {
$('.menu2').removeClass('fixed');
$('.main').removeClass('main2');
}
});
.menu2 {
width: 100%; height: 100%;
background-color: rgb(240, 240, 240);
position: sticky;
left: 0; top: 0;
}
.emptySpace {width: 100%; height: 1000000px;}
<span class="menu2">
Link 1
Link 2
Link 3
Link 4
Link 5
</span>
<!-- the div below is to allow you to scroll so you can see how it works (it's absolutely useless) -->
<div class="emptySpace"></div>
If I'm understanding your question correctly, you can use
HTML:
<span class="menu2">
Link 1
Link 2
Link 3
</span>
CSS:
.menu2 {position: sticky;}
This will cause the navigation bar to stick to the top of the screen as the user scrolls down.
You can read into this a bit more at W3Schools.
Also, check out my Weave at LiveWeave.
I am trying to make a nav menu for part of a practice website, and I made an animation that basically slides down a green div when one of the menu options are hovered over, but once that happens the whole nav menu slides down. which I do not want. I tried changing the nav menus position to absolute, but then it looses its position, and I can't re-position it. Any help would be appreciated, thank you!
Here is the JSfiddle version.
HTML:
<ul id="nav_animations">
<li class="nav_square home_square" id="greenHome"></li>
</ul>
<ul id="navlist">
<li class="navlistitems" id="home">Home</li>
</ul>
CSS:
#nav_animations {
display:inline;
position:relative;
bottom:13px;
}
#greenHome {
display:none;
}
.nav_square {
background-color:green;
width:100px;
height:15px;
z-index:22;
position:relative;
}
#navlist {
display:inline;
font-family: 'Dhurjati', sans-serif;
font-size:45px;
position:relative;
}
.navlistitems {
display:inline;
padding:50px;
color:black;
}
JavaScript:
$(document).ready(function(){
$('#home').hover(function(){
$('#greenHome').slideToggle('fast');
});
});
PS: Yes I do have the JQuery library linked in my actual code.
The quick and dirty solution using your work is as follows below. If you wanted the green dropdown to be below the parent nav item, you should add ul#nav_animations inside the li.navlistitems. That's what I've done below. I also modified your CSS a little to take this into consideration.
And here is a JSFiddle I threw together for you: http://jsfiddle.net/84amnjz7/1/
CSS:
#navlist {
margin: 0;
padding: 0;
list-style-type: none;
font-family: 'Dhurjati', sans-serif;
font-size: 45px;
position: relative;
}
.navlistitems {
position: relative;
padding: 25px 0 0;
display:block;
float: left;
color: #000;
}
#nav_animations {
display: block;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
}
#greenHome {
display: none;
}
.nav_square {
background-color: green;
width: 100%;
height: 15px;
z-index: 22;
position: relative;
}
jQuery:
$(document).ready(function(){
$('#home').hover(function(){
$('#greenHome').stop(true, true).slideToggle('fast'); /* ADDED .stop(true, true) */
});
});
Modified HTML:
<ul id="navlist">
<li class="navlistitems" id="home">Home
<ul id="nav_animations">
<li class="nav_square home_square" id="greenHome"></li>
</ul>
</li>
</ul>
Drop down menu will not work ! for css I used the "display: none;" to hide the list but Im wondering if this is the most efficient way to perform a drop down menu? I used this concept from a codeacademy project.
Im sure there might be some code in here that may make you cringe but please take it easy on me, I'm an absolute rookie at programming! Thank you!
$(document).ready(function() {
$('p').hover(function() {
$(this).find('ul').fadeToggle(400);
});
});
* {
margin: 0;
padding: 0;
}
.main {
margin: 0 auto;
height: 400px;
width: 400px;
}
.container {
max-width: 230px;
max-height: 300px;
margin: 0 auto;
background-color: #024F79;
}
p {
text-align: center;
color: #fff;
border-bottom: 1px solid #fff;
font-size: 18px;
padding: 8px;
}
ul {
list-style-type: none;
display: none;
}
ul li {
padding: 10px;
border-bottom: 1px solid white;
color: white;
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<div class="main">
<div class="container">
<p>How do I ?</p>
<ul>
<li>View my Transcript</li>
<li>View my Conformation Page</li>
<li>Register for Courses</li>
<li>Pay for Courses/Exams</li>
</ul>
</div>
</div>
</body>
$(this).find('ul') will look inside of the p element as a result of using this as the context. You could use .next()
$(this).next('ul').fadeToggle(400);
However, a better approach would be to restructure your html and wrap the whole p and ul with a div that has an id in order to facilitate the UI fading.
<div id="menu">
<p>How do I ?</p>
<ul>
<li>View my Transcript</li>
<li>View my Conformation Page</li>
<li>Register for Courses</li>
<li>Pay for Courses/Exams</li>
</ul>
</div>
And then use your original code except target the #menu item
$('#menu').hover(function() {
$(this).find('ul').fadeToggle(400);
});
jsFiddle Demo
Maybe instead of using JavaScript, you can use pure CSS solutions, unless you want to make some animation.
The CSS:
#divMainMenu ul {
list-style-type: none;
padding: 5px 0;
height:400px;
}
#divMainMenu li {
height: 17px;
margin: 3px 0;
padding: 14px 2px;
border: 1px solid #eee7cb;
background: url(../../Images/50pTransparent-20x20.png) repeat;
}
#divMainMenu li ul{
display: none;
}
The html and script:
<script type="text/javascript">
function Show(pObj)
{
pObj = document.getElementById(pObj).id;
if (document.getElementById(pObj).style.display=='none')
document.getElementById(pObj).style.display='block';
else
document.getElementById(pObj).style.display='none';
}
</script>
<div id="divSidePanel">
<div id="divMainMenu">
<ul>
<li onclick="Show('Buyers')">Buyers
<ul id="Buyers" style="display:none;">
<li>Search</li>
<li>Submit request</li>
<li>Send message to owner</li>
</ul>
</li>
<li>Sellers</li>
<li>Contact Us</li>
</ul>
</div>
</div>
The problem:
When I click on the text Buyers, it shows the sub/nested list. However, the other items do not make space for the nested list. Thus the nested list writes over the space of the main list.
Is this a problem with my code or is it the standard way it's meant to work? And is there a way to let the other items 'push down' making way for the nested items?
Thanks!
You need to use min-height: instead of height: in the CSS. If you know jQuery, the .hide() and .show() functions will work MUCH better.
Take this out of your css:
#divMainMenu li ul{
display: none;
}
And change the height property to min-height on your #divMainMenu li selector
Resultant css:
#divMainMenu ul {
list-style-type: none;
padding: 5px 0;
height:400px;
}
#divMainMenu li {
min-height: 17px;
margin: 3px 0;
padding: 14px 2px;
border: 1px solid #eee7cb;
background: url(../../Images/50pTransparent-20x20.png) repeat;
}
#divMainMenu li ul{
}
Example