Hello I am trying again for an answer - the first time someone advised me on how to get what I want for hover, but I want it for when you click on the menu link.
I am a relative beginner to web development and am currently redesigning my DJ website.
http://www.jameswinfield.co.uk/v2.html
Within the top-left menu, I want to have a div that drops down upon clicking the Events tab (to show the next event I am DJing at).
I would rather do it without JavaScript/jQuery if possible.
I have tried various ideas but none are working.
Please can you help.
Thanks James
This can't be achieved with pure CSS, if you want your element to be toggle-able.
You can use :active on a link in CSS to change the styling (ex: show the next div ) but this won't work if the style changes should persist once you stop clicking on the element.
A little hack to get this to work is to use the :target selector in CSS. Your HTML would look something like this :
Click to toggle
<div id="your_element">This will show up when you click on the link.</div>
And in CSS ..
#your_element{display: none;}
#your_element:target{display: block;}
Example : http://jsbin.com/pifiwezaji/1/
The main issue with this is that your element will be shown until the page is refreshed, I don't think there's a way to hide it again without using some Javascript. The browser support for the :target selector is pretty good, supported by all browsers except IE8 and below.
That being said, I would recommand using Javascript/jQuery for this. It will take only a couple of lines and it will be a lot easier to manage.
CSS has no click event handling. What it does have is the :hover pseudo-element, which you can use with transition to create what you want.
I'd do something like this:
HTML:
<div class='expandable'>
...stuff...
</div>
CSS:
.expandable {
background:#f00;
height:50px;
overflow:hidden;
transition:width 1s ease;
width:50px;
}
.expandable:hover {
width:200px;
}
(untested)
In plain English, this says:
A div that has the class expandable shouldn't have any overflow and
it should be 50 x 50 with a red background. If the width changes,
transition it over 1 second. When it's hovered, change the width to
200px.
That should get you started. Good luck!
Related
I want to make animation where if user clicks/hover the button with border radius that this animation runs.
Animation: Line starts say from top left corner and starts travelling/tracing at the edge/border/parameter and then completes going in clockwise direction.
Sort of like line animation. I have seen it but i dont remember where, i saw it in css version, no svg.
Check out the answers on this post. It's probably not exactly what you're looking for but it might give you some idea.
How to animate border drawing with jQuery?
To make a CSS Animation on a Button is very simple. You just need to define a class on that button and in your CSS code define what happens when that button is hovered over. Now, if you don't want to hassle with writing CSS hover code, you could use ButtonAnimations, a website that provides users with several button animations with the code so that they can implement it into their websites. I use it almost every day when i'm coding a CSS & HTML site from scratch. I have provided ButtonAnimation's link. ButtonAnimations - Create amazing looking buttons and animations with CSS, no javascript required
But before you add animations to your button you need to create it first. (Let me remind you, ButtonAnimations provides you buttons to use beforehand)
<button class='test_button'> Hello StackoverFlow! </button>
And in the CSS do:
.test_button {
background-color: blue;
border-radius: 20px;
width: 200px;
height: 100px;
}
What this code will do is make an HTML Button and style it with CSS. The styling includes changing the width and height, changing the background color to blue and curving the edges of the button with border-radius: 20px;
Thanks for reading! Hope this helps.
Remember, check out ButtonAnimations - Create amazing looking buttons and animations with CSS, no javascript required if you want to present beautiful button hover animations on your website(s) just by simply using their prebuilt animations!
This might be helpful:
http://tympanus.net/Development/ProgressButtonStyles/
You can download the source from here:
http://tympanus.net/codrops/2013/12/12/progress-button-styles/
I'm starting in CSS3, I'm trying to make a menu like this:
http://codecanyon.net/item/metro-navigation-menu/full_screen_preview/4573382
The idea is when you click the button, it hides the parent div and open the div daughter with the other buttons.
I saw this post CSS3 onclick activate another DIV's animation that points to the example http://jsfiddle.net/kevinPHPkevin/K8Hax/, code:
CSS:
#box1 {
display:none;
}
#box1:target {
display:block;
}
HTML:
Click Me
<div id="box1">test test</div>
that clicking on the link, it opens the div. But I want to click the link, hide the div, open the other and then do the reverse.
I would use only CSS3
tks to help
If you do want to use only css3 to do this you can use the Checkbox hack (http://css-tricks.com/the-checkbox-hack/).
It is far from ideal css usage however setting the boxes as radio boxes will do that quite well as each one deactivates the others. (ie you set "width:0px" by default, change to "width:200px" on check combined with "transition: width 0.5s;-webkit-transition: width 0.5s;" for a bit of animation).
In all honesty however you are better using jquery/javascript as the fallbacks for the checkbox hack are not ideal and it is not the stuff that css is really built to control.
Hope that helps,
Dan
This has been already answered you can check out:
CSS3 onclick activate another DIV's animation
This is a very simple technique using the '+' symbol only.Hope you find this useful.
I'm making a website in CSS and HTML (ofc there's JS, jQuery and XML but let's stick to the point) I want to make a button whats using <ul> and <li> to darken the webpage, I found this, code:
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /*enter code here important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:9999; /* may not be necessary */
}
Anyone of you know how to make the CSS menu button to use the div inside of itself?
Here's a demo on CodePen to demonstrate the dimming effect and button: http://codepen.io/srig99/full/pDzgj. As user1618143 suggested, jQuery will make it easy for you to achieve this in your website. I have utilized jQuery in the demo as well.
You'll have to use javascript for this, and JQuery makes it pretty easy. First, put your #dimmer div directly inside the body of your html - putting it deeper runs the risk of only dimming part of your page, if any of its parent elements have absolute, fixed, or relative positioning. Second, add a click event on your button that unhides the dimmer. This is easy with a little JQuery (which I have not tested):
$('#dim_button').click(function() {
$('#dimmer').show(); });
(You'll have to make sure that the button has loaded by the time this code runs, otherwise it won't do anything. The best way to do this is to wrap it inside of a $('document').ready(function{}); )
Note that, in some older browsers, the dimmer div will, by sitting on top of your page, prevent the user from clicking on anything in it, potentially making your page unusable. If you're dimming the page in order to place a popup window on top of that, make sure that closing the popup also removes the dimmer. Note also that in most (all?) newer browsers, users will be able to click through the dimmer and interact with the page underneath, which may not be what you want.
I have a dropdown menu and want to change background of parent's button when hovering submenus. Any ideas how to achieve this so it will work not only in all modern browsers but preferably in IE8/IE9 too?
Simple example, I want to change background of link "This black" while hovering his children ("When hover me" & "and me").
Is it possible with pure CSS?
http://jsfiddle.net/PExLW/
I was thinking about adding certain classes when hovering certain li but it sounds like an overkill, also, adding classes on hover doesn't sound like a good idea.
sure, just take out the a
ul li:hover { ... }
example jsfiddle (or fullscreen)
Let me see how well I can explain this. I am working on an index on a website that is in a div that is pushed off of the page via css margin with only part of it showing. When you hover over the part that is showing, the rest slides down into view. This works fine. I already have the transition effect in place for the margin change slide and also a background color change with rgba. It looks very nice.
My question is, the index is around 500px wide and the visible part before hovering is 70px high. So that is a fairly large area of the screen for people to accidentally catch with their mouse hover if they are not trying to display the index div. Is there some way that I can only make part of the initially visible portion of the div activate the hover transition animation to bring the full div into view? Or perhaps someway I can attach a smaller div to this one as a sort of tab, that will bring down the larger div and itself via transition on hover?
I hope this makes sense. Thank you.
Here is the basic idea of the current code:
#index {
position:fixed;
background:rgba(0,0,0,0.3);
width:500px;
height:500px;
top:0;
left:50%;
margin:-430px 0 0 -500px;
transition:0.5s;
-moz-transition:0.5s;
-webkit-transition:0.5s;
-o-transition:0.5s;}
#index:hover {
background:rgba(0,0,0,0.8);
margin:0 0 0 -500px;}
jsFiddle:
http://jsfiddle.net/wZ8zX/1/
html:
<div id="slider"><div id="trigger"><br></div></div>
js:
$('#trigger').hover(function(){
$(this).parent().animate({'top':0},500);
});
$('#slider').mouseleave(function(){
$(this).animate({'top':-150},500);
});
solution without jQuery:
http://jsfiddle.net/wZ8zX/3/
sorry i usually just browse jquery questions, so i didn't check the tags lol
Using only CSS you can use another block, or a pseudo-element to overlay the parts of block where you don't want to have transition, and then, after hover, make z-index for the element with transition bigger than overlaying element, so all the contents of it would be accessible.
Here is a fiddle with an example: http://jsfiddle.net/kizu/Y3px6/1/
This comes from the position:relative property. I strongly feel that your current div tag has position relative property. Please remove that.