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.
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/
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!
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 div content that has CSS:
height:700;
overflow:hidden;
What i want to do is i want to create a button that says: expand
so once expand is clicked i want the css for that div to change from:
overflow:hidden TO overflow:visible
so know the div will expand to the height spcified in the css and it would be great if the expand button turns into collapse and does the vise versa when clicked
jQuery is your friend. It is the perfect library for constructing basic DOM events like you've described. Your code might look like the following:
$('#expand-button').click(function(e) {
$('.my_div').css('overflow', 'visible');
});
You can use the jQuery .css function to modify the value of a CSS Property. http://api.jquery.com/css/.
You can also Use jQuery to replace on piece of HTML with another, eg. To change the button.
http://api.jquery.com/css/
I've run into a weird IE7 problem..
I have some standard CSS styled buttons with a background picture and a solid 1px blue border. They work as supposed except in IE7..
If I click inside a form element (textarea/input-field) it automatically adds a black border on my buttons.. Sometimes it also happends in other cases where elements are in focus/active..
You can see a simple example here
The thing is that I need the border on the buttons for styling reasons, so isn't there a way of disabling this behaviour in IE7 without removing the original border - either with CSS or jQuery?
I blogged about this issue here: http://markmintoff.com/2012/01/remove-internet-explorer-black-border-around-button/
Essentially you can use the following style to remove the offending border simply and effectively.
input[type=submit],
input[type=reset],
input[type=button]
{
filter:chroma(color=#000000);
color:#010101;
}
IE is highlighting the form's "default" button, the button that will be triggered if you press the enter key inside one of the form inputs. To disable the highlighting, you have a couple options:
Make the save button type="button" instead of type="submit", and handle the form submission by handling the button's click event in javascript. This was the answer to this related question (although ASP.NET is handling the javascript part behind the scenes).
Add a second type="submit" button as the first input in the form, then hide it with CSS. Note that display:none; will not cut it, you need to hide it by positioning it off screen with something like: position: absolute; top: 0; left: -9999px;. This was the answer to this related question.
jquery: $('input[type="submit"]').focus().blur();
javascript:
document.getElementById('save').focus();
document.getElementById('save').blur();