Menu hover effect - how to reproduce this effect? - javascript

Here is a nice hover effect applyied on main menu (red rectangles above menu): http://www.templatemonster.com/demo/37841.html
I'd like to use this effect on my website. There is no any css for that effect, so it must be some javascript used. How could I reproduce this or where could I find the javascript that can do that on my website? Simply, how could I achieve that?

There is no need to use javascript, you can achieve it via CSS, try toggling the hover state on any of those links and you will see the effect.
The relevant CSS there is
#superfish-1 > li > a {
-webkit-transition: all .3s ease;
padding: 98px 10px 0 10px !important;
background: url(../images/menu_hover.gif) 0 -100px repeat-x;
}
#superfish-1 a:hover {
background-position: 0 0;
}
So, basically, there is a background image (the red rectangle) with a 100px offset; when you hover the link, the background offset disappears (with a 0.3s transition)

The best language to use would be javascript and the library JQuery. Use the command .toggleSlide and .hover() I put some code down below as an example. Research more into it to get more advanced.
$(document).ready(function(){
$('.home').hover(function(){
$('#home_div').toggleSlide('slow');
});
});
".home would" be the menu tab that say "Home"
"#home_div" would be the red box that appears.
to summarize all the code: You are basically saying that when you hover over the html element with the class "home" (in the case the menu item) to have the html element with the id "home_div" to slide down slow. and then slide back once you stop hovering your mouse.
Good luck. If you want to know more about jquery just research it.

Related

Customizing responsive navbar

it is my first time using flex and I tried to make a responsive navbar and it is success in a way. Things I want to do:
Make the hamburger icon turn to X with smooth transition.
Make the menu opening with smooth slide down transition (instead of instant showing).
Add [ border-bottom: 1px solid black; ] to .social-icons when the menu is opened (active).
Add [ border-radius: 0; ] to .social-icons ul li:first-child when the menu is opened (active).
I've tried many things, watched many tutorials but I can't make it. Here is the code:
Help will be much appreciated.
You can not expect people to finish your code off, especially when it is something simple as HTML & CSS.
First of all I am going to explain it how you can accomplish 3rd and 4th problem that you have.
When you click hamburger icon to show menu, it adds 'active' class name to 'navbar-links'.
Therefore you need to make something like this to accomplish what you want.
.navbar-links.active .social-icons{
...your style goes here..
}
How this works is that you are selecting elements that have both navbar-links and active as their class names. After that selector you are selecting child elements that have social-icons class name.
To make smooth animations when you open menu and when it resizes, I recommend you looking into w3schools tutorial where you can see how animations work.
Just add animation to hamburgers class name and as soon as it gets that class name it will make an animation that you designed.
Look at it this way, when you declare animation for a class, as soon as an element gets that class it will run an animation.
For instance you can do something like this :
CSS :
.toggle-button{
opacity: 0.5;
color : white;
}
.active_toggle_button{
animation : customAnimation 0.5s linear forwards;
}
#keyframes customAnimation {
to{
opacity: 1;
color : green;
}
}
And in your Javascript :
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active');
toggleButton.classList.toggle('active_toggle_button');
})
This will toggle "active_toggle_button" class to your hamburger when you click it. As soon as it adds this class to your hamburger it will do the animation.
As I said, look into the link I gave you from w3schools. This is just general idea to let you know how it actually works.

change dots on scroll [duplicate]

I'm using Bootstrap 3 and want to achieve this effect when the user scrolls past the large header image on my page. I need the background of the navbar to go from transparent to white. I looked in their code and I KNOW it is done with javascript, and even saw WHERE it was happening I think (look for the ID '#main-header' in that JS)...
Not knowing advanced Javascript aside, I'm looking for a way to apply this to my navigation bar when scrolling past a certain point. The class for my code is called 'navbar' and I would like it to turn white when it passes "#main". Let me know if you need more information, and thanks in advance if anyone wants to help!
The easiest way to accomplish what you're trying to do is a combination of some simple javascript (jQuery powered in this case) and CSS3 transitions.
We'll use JS to check for the windows scroll position on every scroll event and compare it to the distance of the bottom of the #main element - if the scroll position is greater, then we'll apply a class to the body to indicate we've scrolled past #main, and then we'll use CSS to define the nav styling for that "state."
So, our basic markup:
<nav class="nav">
[logo]
</nav>
<div id="main">#main</div>
<div id="below-main">#below-main</div>
And our javascript:
// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();
// on scroll,
$(window).on('scroll',function(){
// we round here to reduce a little workload
var stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.nav').addClass('past-main');
} else {
$('.nav').removeClass('past-main');
}
});
And, our styles:
.nav {
background-color:transparent;
color:#fff;
transition: all 0.25s ease;
position:fixed;
top:0;
width:100%;
background-color:#ccc;
padding:1em 0;
/* make sure to add vendor prefixes here */
}
.nav.past-main {
background-color:#fff;
color:#444;
}
#main {
height:500px;
background-color:red;
}
#below-main {
height:1000px;
background-color:#eee;
}
A working example on Codepen
This is how I did it here. I also employ some scroll throttling and a bit more complicated styling semantics, but this is the gist of it.
If you're using Twitter Bootstrap this can be achieved with the 'Affix' plugin
It's pretty straight forward to set up, here is the documentation
You could probably just use javascript element.scrollTop along with Jquery addClass and removeClass. Haven't tried it myself though.
Here's an overflow link for getting scrollbar position: How to get scrollbar position with Javascript?

Toggle Div combined with CSS-Hover

I tried a lot to solve the following: A click on "#pageTitle" should open the "#expandMenu". The expandMenu is exactly located in the bottom of the menubar. As you can see in CSS, there is a hover effect on the background-color. The code works fine so far, but even thought I still have a problem: The menubar should stay in the hover-color, till the toogleMenu gets closed. The user need to reach the expandMenu with his mouse for interacting. But after that, with my current code the via jQuery added css doesn't reset itself to the default css-hover mode.
It also would be nice, if the solution could include the possibility to add some further events, for example a switching icon (open, closed)
The CSS:
#expandMenu {
background-color: #009cff;
opacity: 0.8;
height:65px;
width:100%;
display:none;
}
#menubar {
height:95px;
width: 100%;
color:#FFF;
}
#menubar:hover {
background-color:#0f0f0f;
transition: background-color 0.3s ease;
color:#FFF;
}
jQuery:
$(document).ready(function(e){
$("#pageTitle").click(function() { $('#expandMenu').slideToggle( "fast");
$('#menubar').css( "background-color", "#0f0f0f" ); } );
})
HTML:
<div id="menubar">
<div id="pageTitle">Start</div>
</div>
<div id="expandMenu">
</div>
I have created a fiddle here that I think captures your page pretty well. I have tweaked the css class for the menubar a little bit so that the text stays visible, but the main change I have made is adding a class to the #menubar rather than directly applying the new background color. Then when you are hiding the #expandMenu you can remove the class to go back to the original color, whatever it was.
I check whether the expandMenu is visible and adjust the classes accordingly:
if ($('#expandMenu').is(':visible'))
{
$('#menubar').removeClass('menu-active');
}
else
{
$('#menubar').addClass('menu-active');
}
I check this state before I toggle the menu item because the slideToggle takes some time to finish, and the div is not visible immediately after the call. Checking its state before applying the animation avoids this problem.

Text appear in zoom in effect

How can we show text in zoom in effect. I saw it on one travel site. I did google but cant find this kind of effect. I just want little hint what kind of effect is this. I red about easing but did not find the same effect. I have attached screenshot for the same. Here is link of that website http://cleartrip.com/flights?ui=v3. The effect is on payment page
Ok, so when you do something to make the section appear, the button within it animates from nothing to 100% size from its center point. So basically what you are asking is how to make something grow from 0% to 100% via animation. There's probably a totally javascript way but I personally would use css animation for this.
Suppose you are adding a class to the parent div to reveal a section of content (in the example you linked to it is revealing a section of the order form) all you need to do is in the css add an animation to the button that is triggered when the section gets a class added. In my example below I'm calling the section 'page' and assuming you're adding a class of 'active' to reveal it - obviously these could be anything you like:
Html:
<div class="page">
<div class="animated_button">Look at me</div>
[other content that you don't want to animate]
</div>
Css:
.page{
display:none;
}
.active{
display:block;
}
.animated_button{
[styling for how you want your button to look]
}
.active .animated_button{
animation: growUp 0.4s;
}
#keyframes growUp {
0% { transform:scale(0); }
100% { transform:scale(1); }
}
Note that you may need to add vendor-prefixes for the transforms.
Here is a codePen - there's a few extra styles and stuff in there just to show an example of how it works:
http://codepen.io/chrisboon27/pen/weJmL

JavaScript/HTML to alternate row colors for input type textarea?

Is there an easy way to have an HTML <textarea> alternate its row colors
to improve editing?
I don't mind if the solution is pure CSS or if it requires JavaScript.
textarea {
background-image: linear-gradient(#F1F1F1 50%, #F9F9F9 50%);
background-size: 100% 4rem;
border: 1px solid #CCC;
width: 100%;
height: 400px;
line-height: 2rem;
margin: 0 auto;
padding: 4px 8px;
}
Found this on codepen. Working for me.
If I understand correctly that you want the colors alternating WITHIN the textarea (as in each line)?
I would suggest the easiest method is to use a background image in your textarea's and have the rows of the alternate colors the same height as the font-size/line-height to create the illusion of alternate rows, then just repeat the background image.
Additional Solution
However, it seems that using that method, the background doesn't scroll along with each line.
The best technique I can come up with is to use a jQuery plugin called 'autoResize' by James Padolsey. What this does is removes the scrollbars and as your text nears the bottom of the textarea, the textarea height is increased accordingly.
Now, that can cause problems since you could potentially have VERY long textareas depending on how much text the user writes but I've created a fix for this.
What we can do is wrap the textarea in a div and set the overflow-y (vertical) to scroll and the overflow-x (horizontal) to hidden. What this does is now give us a "fake" scrollbar on our textarea, creating the illusion that it's scrollable so our background now appears as if it scrolls up and down with the text too.
You will have to adjust the width/height/margins/borders/paddings etc accordingly and maybe check for cross browser compatibility, but this should help set you on the right track and get you going.
Here is a link to an example I have created using the above method:
http://jsfiddle.net/HelloJoe/DmPLH/
CSS supports an nth child syntax now. Check out the MDN docs for an example of changing the background-color of only every other list item inside an unordered list:
HTML:
<p>NBA players with most championships:</p>
<ul>
<li>Bill Russell</li>
<li>Sam Jones</li>
<li>Tom Heinsohn</li>
<li>K. C. Jones</li>
<li>Satch Sanders</li>
<li>John Havlicek</li>
<li>Jim Loscutoff</li>
<li>Frank Ramsey</li>
<li>Robert Horry</li>
</ul>
CSS:
li:nth-child(even) {
background-color: lightyellow;
}
RESULT:
An example of making every other line in a textarea a different color by using CSS' nth-child syntax
SOURCE:
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Categories