The header includes a simple large white title/logo, with a navigation right below it.
Then upon scrolling past the navigation, the header changes to a pink, semi-transparent bar with the title/logo on the left and a navigation to the right. It sticks to the top of the page as well.
HTML:
<header>
<h2>The</h2>
<h1>Catching Raindrops</h1>
<nav>
<ul>
<li>About</li>
<li>Contact</li>
<li>Music</li>
<li>Travel</li>
<li>Quotes</li>
</ul>
</nav>
</header>
How do I go about this? I've searched everywhere I can think of, but haven't found any tutorials on how to change it the way I want to. I did find this: http://codepen.io/senff/pen/ayGvD which only makes it sticky.
And I don't know JS so can't really figure out how to change it, but this one seems to be the kind I'm looking for, where the class changes, so that I only have to add another class in the css and put all of the on-scroll changes there, am I right? If I am, how do I go about changing it for the logo and navigation? In this CodePen example, only one class has been used, which would only be able to change the navigation, and not the headers, right? Sorry if this sounds incredibly confusing. :/
And in this, the JS code targets selectors and changes the colors, but as I've explained above my changes are more complicated.
The layout for this page is how I want it to be like, only this tutorial confused me to no end :/
This is my CSS
header {
font-family:'Steelfish';
color: #FFF;
margin: 10px 0 0 0;
}
header h1 {
font-size: 90px;
text-align: center;
text-transform: uppercase;
}
header h2 {
font-size: 40px;
text-align: center;
text-transform: uppercase
}
nav {
font-size: 30px;
text-align: center;
text-transform: uppercase;
margin-top: 5px;
}
nav ul {
margin:0;
padding: 0;
list-style-type: none;
}
nav ul li {
display: inline-block;
padding: 0 10px 0 10px;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
nav ul li a:hover {
text-decoration: none;
color: #9E9E9E;
-webkit-transition: color 900ms ease;
-moz-transition:color 900ms ease;
-o-transition: color 900ms ease;
transition: color 900ms ease;
}
Thank you in advance.
The last link is from my site and my tutorials are written for WordPress and Suffusion theme. This can be a reason for what the tutorial looks confusing. In WordPress jQuery library is already loaded and the theme have a markup which is reffered in tutorial.
But html/javascript/css works in WordPress exactly as in any other site, so, with some little adjustments the solution from my site will works for you too. You only need some minor changes for making your markup ready for trasformations.
For making this solution to work will need to link jQuery library in the head section of your page (and I also added here the needed jQuery function):
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$j=jQuery.noConflict();
$j(document).ready(function() {
var nav = $j('#nav');
$j('#left-header').hide();
$j(window).scroll(function () {
if ($j(this).scrollTop() > 150) {
nav.addClass("scroll-nav");
$j('#header').hide();
$j('#left-header').show();
} else {
nav.removeClass("scroll-nav");
$j('#header').show();
$j('#left-header').hide();
}
});
});
</script>
</head>
Then you have to make some small changes in your markup, mostly for naming your sections, but also for adding a new div which need to hold the small logo (#left-header div):
<body>
<header id="header">
<h2>The</h2>
<h1>Catching Raindrops</h1>
</header>
<nav id="nav">
<div id="left-header">The Catching Raindrops</div>
<ul class="menu">
<li>About</li>
<li>Contact</li>
<li>Music</li>
<li>Travel</li>
<li>Quotes</li>
</ul>
</nav>
<div id="just-for-testing" style="height:1000px;"> </div>
</body>
The div with id #just-for-testing is added only for giving some height to the page otherwise you cannot scroll - replace that div with your real content.
Finally, add in your stylesheet the CSS for navigation bar after scrolling:
.scroll-nav {z-index: 9999; position: fixed; left: 0; top: 0 !important; width: 100%;background:rgba(255,0,0,0.5);}
.scroll-nav ul.menu {float:right;}
#nav #left-header {float:left;font-size:80%;}
#nav #left-header a {background:none;}
#left-header {display:none;border:none;}
#left-header img {border:none !important;}
You can see, test and use all these changes in the fiddle linked below
http://jsfiddle.net/drake/bg2S4/
Hope it help
Related
Ok so i'm super beginner with html and css and i don't know javascript at all.I'm creating a little website as a school project, i made horizontal navigation bar from w3schools tutorial, what i want to do is when i press one of the buttons to stay colored, not just change color for 1 sec because they are 'active'. My code may be completely messy but i really need help.
Also i have 3 more subpages connected to this one, i want them to stay colored as well.
What i'm trying to achieve is exactly this: How can I add class on active li with JavaScript code
But it doesnt work for me, maybe i need to change something in javascrip because my class is named 'navbar'?
I've tried several solves from this topic on stack overflow but none of these work for me :\
HTML:
<ul class="navbar">
<li>Pocetna</li>
<li>Stranica 2</li>
<li>Stranica 3</li>
<li style="float: right;">Kontakt</li>
</ul>
CSS:
.navbar {
list-style-type: none;
position: sticky;
top: 0;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: Arial;
}
.navbar li a:hover {
background-color: #111;
}
Im expecting link to stay orange when im on that page.
you can do some things with jquery like add an event listener that changes the css of html elements
const changeColor = () => {
$('ul > li > a').css('background-color', 'inherit')
$(event.target).css("background-color", "red")
}
$('ul > li > a').on('click', changeColor)
https://jsfiddle.net/z02ndowt/
You can do this by adding a class onto your html <a> tag on the link that is active and then just style the active class within your CSS. See below:
HTML
<ul class="navbar">
<li><a class="active" href="sajt.html">Pocetna</a></li>
<li>Stranica 2</li>
<li>Stranica 3</li>
<li style="float: right;">Kontakt</li>
</ul>
CSS
.active {
color: orange;
}
Ok so i did some testing and kinda found a solution. I put identificator on instead of class. So on my main page i put id="active" on first link, on my second page on second link etc. then just added #active { background-color: orange; } and it works just how i wanted it to work.
Im trying to get each link to animate up when the user hovers over them, what is the best way to do this?
my code is
<ul class="nav">
<li>Batting</li>
<li>Bowling<li>
<img class="logo" src="images/logo.gif" width="125" height="125">
<li>Fielding</li>
<li>The Game</li>
</ul>
thanks.
Yes, this is possible to add hover animation on any element using purely HTML markup and CSS.
.animated
{
transition: prop;
prop: value1;
}
.animated:hover
{
prop: value2;
}
Where prop is the CSS property that you wan't to be animated. This works very well in most browsers. Also, it is possible to create this behavior with scripts as well.
With your markup, the best and easiest script-free solution to animate is to use :hover and transition. Here is a fiddle how to animate margin-left: http://jsfiddle.net/9kpfW/
You can animate any property with a numeric measure. (12px, 12em, 12% etc.) It is possible to add hover affects with non-numeric properties (i.e. text-align) as well, but you can't apply a transition. Also, it is possible to animate multiple properties on the same element using transition.
So, you can create very rich effects purely with CSS. No JavaScript is necessary. :hover effects work well in almost every browser, including ancient versions of Internet Explorer. However, if you need to support outdated browsers with the same animated transition effect, you need to use JavaScript, which is supported and enabled in almost every browser. I recommend using jQuery JavaScript library to simplify your scripts.
Based on luckyamit's answer, here is a trivial example of the same margin-left animation using jQuery. This works well in almost any web browser, including ancient versions.
$(".nav li").hover(
function()
{
$(this).find("a").stop().animate({"margin-left" : "40px"});
},
function()
{
$(this).find("a").stop().animate({"margin-left": "5px"});
}
);
Fiddle: http://jsfiddle.net/LxAva/1/
However, if you don't need to serve the same experience in those rare browsers, I recommend the pure-CSS solution, because of the principle of decoupling markup, style and logic. Rich transition effects are way more related to style than logic, so they should be solved with CSS instead of JavaScript. Also, in most cases CSS is easier and faster to implement.
You can try below one using jQuery.
$('.nav a').mouseover(function(){
//add animated changes here
}).mouseout(function(){
// add the default behavior here
})
just try this
//HTML
<ul class="nav">
<li>Batting</li>
<li>Bowling<li>
<img class="logo" src="images/logo.gif" width="125" height="125">
<li>Fielding</li>
<li>The Game</li>
</ul>
//SCRIPT
$(".nav").hover(function(){
$(this).stop().animate({"top" : "10px"});
}, function(){
$(this).stop().animate({"top": "0"});
});
//CSS
.nav
{
position: relative;
}
Here is the DEMO for you, just check it.
Here's a FIDDLE
<ul class="nav">
<li><img class="logo" src="images/logo.gif"/></li>
<li>Batting</li>
<li>Bowling</li>
<li>Fielding</li>
<li>The Game</li>
</ul>
ul {
list-style: none;
}
li {
background: #555;
float: left;
margin-right: 15px;
text-align: center;
border: 1px solid #333;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
li:hover {
margin-top: -22px;
}
li a {
display: block;
height: 25px;
width: 120px;
color: #fff;
letter-spacing: 1px;
text-decoration: none;
padding-top: 4px;
}
jQuery solution
$('li').hover(function() {
$(this).stop().animate({ marginTop: '-22px' }, 450);
},function() {
$(this).stop().animate({ marginTop: '0' }, 450);
});
Changes in CSS - transition property removed.
li {
background: #555;
float: left;
margin-right: 15px;
text-align: center;
border: 1px solid #333;
}
li:hover {
}
This question already has an answer here:
How to highlight active tab on the website menu?
(1 answer)
Closed 9 years ago.
My question is :
I have a menu items, and I want to highlight the active tab that users switch to that points to another page for sure .
stackover flow use :
.nav {
float: left;
font-size: 125%;
}
.nav ul {
margin: 0;
}
.nav li {
background: none repeat scroll 0 0 #777777;
display: block;
float: left;
margin-right: 7px;
}
**.nav .youarehere {
background: none repeat scroll 0 0 #FF9900;
}**
.youarehere a {
color: #FFFFFF;
}
.nav li:hover {
background-color: #FF9900;
}
.nav a {
color: #FFFFFF;
display: block;
padding: 6px 12px;
text-decoration: none;
}
Can anybody tell me what else they use to make this work ?
menu :
<ul class="nav">
<li> <a href="{$smarty.const._URL}/index.{$smarty.const._FEXT}" class="wide-nav-link menu_link" >{$lang.homepage}</a></li>
<li class="dropdown">
{$lang.category} <b class="caret"></b>
<ul class="dropdown-menu menu_link">
{dropdown_menu_video_categories}
</ul>
</li>
{if $smarty.const._MOD_ARTICLE == 1}
<li class="dropdown">
{$lang.articles} <b class="caret"></b>
<ul class="dropdown-menu menu_link">
{dropdown_menu_article_categories}
</ul>
</li>
{/if}
<li> {$lang.top_videos}</li>
<li>{$lang.new_videos}</li>
<li>{$lang.random_video}</li>
{if isset($mm_menu_always_inject1)}{$mm_menu_always_inject1}{/if}
<li>{$lang.contact_us}</li>
{if isset($mm_menu_always_inject2)}{$mm_menu_always_inject2}{/if}
{if $logged_in != 1 && isset($mm_menu_notlogged_inject)}{$mm_menu_notlogged_inject}{/if}
</ul>
Or you can add programmatically class="active" (or selected) to the current selected menu and do this:
.nav li a.active {
color: #FFFFFF;
}
#ChrisHerbert your solution will not work... you will change all the li of the menu... because the class is in your body tag. (EDIT: the solution was changed, see comments)
With #ChrisHerbert answer, you can do it in two ways:
1) with Javascript, take the class in the body tag then select the one with the associate index (:eq() in jQuery). (you can find a way without javascript for non-javascript user)
OR
2) you can do: .home .nav li:nth-child(0) {}, .about-us .nav:nth-child(1) {}, etc. if you know the index of each page in your menu! Or other child selector but, old versions of IE don't like it!
I think you should do it with my solution rather then the body tag. Still, it is really useful to have that class in the body for page specific thingy to add.
Add a unique class to the <body> tag of each page. For example, on the home page:
<body class="home">
On the contact page: <body class="contact">
On the blog page: <body class="blog">
..and so on.
Then, in your CSS, do something like this:
.home .nav li.home, .contact .nav li.contact, .blog .nav li.blog {
// styling to indicate active state
}
I think the question is, are you looking to have this done dynamically? Or are you coding each page? The other two solutions are great, but a bit overkill if actually you're accessing each page individually. You could just add a class to the selected nav element depending on the page. This is probably the easiest to get your head around if you've not done it before, but #ChrisHerbert's solution is the nicest way of doing it dynamically just using CSS (no PHP ifs etc).
HTML
<div class="nav">
Home
About us
Portfolio
</div>
CSS
.nav a {
color:#ff4444;
}
.nav a.selected {
color:#ff44ff;
}
EDIT: Just realised that #AnnieCaron's answer is the same as mine.
Following is my js fiddle in which i tried to create a light out effect like the following website bankalhabib.com, The issue is that on hover on menu my rest of screen is not getting dim which i actually want and instead only my menu is getting dim.
Kindly let me know ow can i resolve this issue so i can achieve the same effect as above mentioned site?
Thanks,
http://jsfiddle.net/49Qvm/9/
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Num</li>
</ul>
$('li').hover(function(){
$(this).addClass('hovered');
},function(){
$(this).removeClass('hovered');
});
I think your best bet would be to create an element for the darken effect on the screen. When you hover over the ul element it will toggle the visibility of the darkening element.
You will need to be sure that the z-index value for the ul element is higher than the element that provides the darkening effect (Remember this! When setting z-index on an element you will need to be sure to set it's position CSS property to relative, fixed, or absolute).
Here's a fiddle: http://jsfiddle.net/49Qvm/28/
Try this javascript/css that utilizes z-index to create a focused effect.
CSS
.link {
z-index: 700;
list-style-type: none;
padding: 0.5em;
background: black;
display: inline-block;
cursor: pointer;
color: white;
}
.dim {
width: 100%;
height: 100%;
z-index: -6;
display: none;
content: "";
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
}
body {
background-color: orange;
}
jQuery
var $dim = $('.dim');
$('.link').hover(function(){
$dim.fadeIn(200);
}, function(){
$dim.fadeOut(200);
});
HTML
<div class="dim"></div>
<ul>
<div class="link"><li>Home</li></div>
<div class="link"><li>Home</li></div>
<div class="link"><li>Home</li></div>
<div class="link"><li>Home</li></div>
</ul>
Some text here
http://jsfiddle.net/49Qvm/33/
I think maybe this is a scoping issue. Inside the context of the function, "this" refers to the function not the li element. I used to run into a lot of problems related to this. The solution for my cases were to look into using closures to ensure you are adding the class to the correct html element.
I am using in-page link anchors to smooth scroll down my page. Everything works just fine and each link hovers to the appropriate image. However, I want the active section to have a different image to show the user where they are. I cant seem to get this to work with anything.
Here is my HTML
<div id="scrollnav">
<ul>
<li class="scrolldot"><span>1</span></li>
<li class="scrolldot"><span>2</span></li>
<li class="scrolldot"><span>3</span></li>
<li class="scrolldot"><span>4</span></li>
<li class="scrolldot"><span>5</span></li>
<li class="scrolldot"><span>6</span></li>
</ul>
</div>
Here is my CSS
#scrollnav { width: 75px; height: 150px; position: fixed; right: 0; top: 100px; z-index: 999999;}
#scrollnav ul li { height: 16px; width: 16px; padding: 0px 0px 7px 0px; }
span { text-indent: -99999px; }
.scrolldot a { display: block; height: 16px; width: 16px; background-image: url(../images/dots.png); background-repeat: no-repeat; background-position: -16px 0; }
.scrolldot a:hover { background-image: url(../images/dots.png); background-repeat: no-repeat; background-position: 0 0; }
.selected { background-color: red; }
This is an example of the section I would scroll to and would want active.
<section id="one">
<div id="mainimagewrapper">
<div class="image1">
<div class="image2">
<div class="970content">
<div id="textdiv">
<h1>This is headline.</h1>
<p>This would be a description if someone wanted to write stuff here. This would be a description if someone wanted to write stuff here. This would be a description if someone wanted to write stuff here.</p>
</div>
</div>
</div>
</div>
</div>
</section>
I think the easiest way to do this, without writing your own jQuery script, is to check out Twitter Bootstrap's "Scrollspy" plugin. I believe it provides the effect you're looking for with very little configuration.
Link: http://twitter.github.com/bootstrap/javascript.html#scrollspy
/* ORDER to define anchor pseudo classes */
a, a:link, a:visited { ... css ...}
a:hover, a:visited:hover {... css ...}
a:active,a.my-active {... css ...}
a:focus {... css ...}
This way you define styling for browser default actions on an anchor.
After that, you might need to trigger some behaviors with javascript (in case the browser misbehaves due to #hash in hyperlink).
Using a jQuery action to add some of your flavour, like .my-active toggled onClick won't help you if you 'reload' the page. You will have to deduce the #hash from the hyperlink, then treat it for your styling.
Simply use jQuery hashchange to get the #hash from hyperlink then trigger a class on your element in scope.
Otherwise, if you just need a plugin to scroll-to some place inside an opened page : http://demos.flesler.com/jquery/scrollTo/ or study jquery-joyride-feature-tour-plugin.
Carry on