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.
Related
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.
I have converted a flash ad using jQuery. Everything is working fine, but my mouse hover animation is not working smoothly. There is text "Details" at the bottom right, and when mouse is moved over the text, then the whole container turns black. I have added the effect as:
$('#disclaimer').hover(
function () {
$('#wrapper').addClass('hovered');
}, function () {
$('#wrapper').removeClass('hovered');
}
);
But it is not working perfectly; sometimes it works, and sometimes it does not. If I move my mouse over the "D" character of "Details", then it does not work. What am I missing here? I want this effect to work smoothly whenever I move my mouse over "Details" character; it should turn black.
Any suggestions?? this is my JsFiddle code.
When you hover over the #Disclaimer element, you set several elements to display:none;, including this one.
As this element disapears, the hover event is no longer active, so you end up with an infinite loop. To avoid that, use opacity:0; instead, which will keep your elements in place but not visible.
Also, to avoid the #disclaimer to move around, make it position:absolute;.
Here is the JS Fiddle
CSS
.hovered #Image_Car { opacity:0; }
.hovered #ctaBtn { opacity:0; }
.hovered #Image_logo img { opacity:0; }
.hovered #headlineText { opacity:0; }
.hovered #disclaimer { opacity:0; }
#disclaimer {
/* ... */
position:absolute;
top: 168px;
left: 235px;
}
I'd recommend just using the CSS :hover property, no sense in using javascript for simple styling changes like this.
You're having issues with a specific element not being associated with the parent element's hover functionality, which can be avoided by adding a rule to the parent's CSS and working from there.
The problem here is that when the hovered is show the Detail text is set to none, so the hover out event will dispatch, removing the hovered class!
You can fix this, by changing disclaimer hover part with this:
$('#disclaimer').mouseenter(
function (e) {
$('#wrapper').addClass('hovered')
.mouseleave(function () {
$('#wrapper').removeClass('hovered');
})
});
So the detail will disappear when the mouse leaves the div, you can also change the mouseleave to mousemove if you want it to disappear just on move.
Here is the result http://jsfiddle.net/r3BTU/2/
You can set up to classes (a hidden and a visible) and the switch between the classes with js.
var movingElement = document.getElementById("messageDiv");
var disclaimer = document.getElementById("disclaimer");
disclaimer.onmouseover= function(){
movingElement.className="class2";
};
disclaimer.onmouseout= function(){
movingElement.className="class1";
};
You can add trasitions in the css so the visible class "fades" in.
Here's a Demo:
http://jsfiddle.net/Nillervision/eSbzg/
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.
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
First, I'm very new to bootstrap so try to bear with me on this one. I've been working on a website that has a bootstrap sidebar I'm trying to get working right. I've seen other examples of this but I'm not sure what to do.
On the sidebar, I am using an <i> element icon before each item which in this case is toggle icon-chevron-right. What I would like to do is when someone clicks on an item on the sidebar, revealing the sub-items, the icon will change to toggle icon-chevron-right to toggle icon-chevron-down.
I have played around with some JavaScript trying to get it working but to no avail. Any insights would be helpful.
You could use a sprite with both your right and down arrows in then use CSS to toggle between the two by adjusting the background position.
Like:
element {
background: url(images/whatever.png) no-repeat;
}
element:active {
background: url(images/whatever.png) no-repeat 10px 10px;
}
play around with the position until you have it right
You can change the class on the icon, when the <a> clicked:
$('a').click(function () {
var icon = $(this).find('i');
if (icon.hasClass('icon-chevron-down')) {
icon.removeClass('icon-chevron-down').addClass('icon-chevron-right');
}
else {
icon.removeClass('icon-chevron-right').addClass('icon-chevron-down')
}
});