Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I am working on a site .As you can see there's a menu item called Digital Marketing. The item has a submenu called Digital Marketing Consultancy.i want the submenus like in any other websites with the dropdown effect like when we hover the menu item the submenus dropsdown.
eg : like the menu here.
I have tried giving
.sub-menu{display:none;}
.sub-menu:hover{display:block;}
here is the fiddle .how can i make it like the menu effects in other sites.Please help.Thanks!!
updated fiddle
Pure css solution is CSS(3) transitions.
http://jsfiddle.net/9gjbfvwy/
use width and height 0, with overflow hidden.
Use CSS3 transitation to set them to auto.
See fiddle (it's your code, with 3 additions)
ul.sub-menu{height:0;width:0;overflow:hidden;}
.menu-item:hover ul.sub-menu{background:orange;width:200px;height:50px;}
ul.sub-menu {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.sub-menu is your submenu, so you need to fire your hover on your main menu item, not on your submenu item.
Add this to your css:
ul#menu-main li ul.sub-menu{
display:none;
}
ul#menu-main li:hover ul.sub-menu{
display:block;
}
Working jsFiddle: http://jsfiddle.net/wyy7e61o/1/
You should initially hide all the submenus and show them when hovering the parent menu.
Like
.sub-menu {
display: none;
}
.menu-item:hover > ul.sub-menu {
display: block;
}
Check Updated fiddle here
http://jsfiddle.net/wyy7e61o/6/
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
I've been looking online for this kind of effect for long time without having success.
It looks like there is a js script that changes dynamically the css -webkit-transform: rotateY(deg) property.
Is there anything online that does the same thing?
I hope somebody can share a similar script thanks.
If there is enough space it shows the boxes with no rotation:
If there isn't enough space the script changes the rotation and get them closer to each other:
Your example looks like a y-rotation. Heres a basic snippet of it.
body {
display: flex;
}
div {
width: 150px;
height: 150px;
background: url('https://picsum.photos/200?random');
transition-duration: .35s;
box-shadow: -3px 3px 3px #000;
}
div:hover {
transform: rotateY(70deg);
transition-duration: .35s;
}
<div></div>
<div></div>
<div></div>
If you're looking for a library that can rotate or animate HTML Elements you can use animate.css. It's easy to use !!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am not good in front end. But now I need to write some jQuery. What I want to do is I have a text box. It has many parents element including HTML body tag. What I want to do is I want to change all the color a little dark with opacity for the rest of elements except that text box when it is focused.
The fading is something like modal box in Bootstrap. How can I achieve that?
you could add a huge box-shadow (100vmax is enough to cover all the viewport), maybe with a short transition, to the input element when it receives focus, e.g.
input {
box-shadow: 0 0 0 100vmax rgba(0,0,0, 0);
transition: 1s box-shadow
}
input:focus {
box-shadow: 0 0 0 100vmax rgba(0,0,0, .7);
}
Codepen example: http://codepen.io/anon/pen/pjpqjg
When the input loses the focus, the effect disappears with the same duration.
Note: On Safari this effect based on box-shadow doesn't work unless you set -webkit-appearance: none;, but you might use an outline instead (tested on Version 9.0 (9537.86.1.56.2)/MacOS 10.9.5)
input {
outline: 100vmax rgba(0,0,0, 0) solid;
-webkit-transition: 1s outline;
transition: 1s outline;
}
input:focus {
outline: 100vmax rgba(0,0,0, .7) solid;
}
Codepen example: http://codepen.io/anon/pen/pjpqRb
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I would like to change some text on hover with a flipping animation.
The number "1" would be displayed and on hover the number flip horizontally to become a "0".
When the hover out, the number would return to "1"
I can't success to make it fluid.
Any help, script which you do it?
Thanks in advance!
UPDATE : https://jsfiddle.net/4t7ogtfz/
Here's what I try.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("p").hover(function(){
$("p").text('0');
});
</script>
p{
font-size:45px;
display:inline-block;
}
p:hover{
transition: all ease-in 1s 0s;
-webkit-transition: all ease-in 1s 0s;
-webkit-transform: rotatex(180deg);
transform: rotatex(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>1</p>
Make backface visibility hidden, use two elements instead of one, position:absolute them on top of eachother, put them in a containing element - when the containing element is hovered, trigger your flip transition.
Read this:
http://davidwalsh.name/css-flip
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Is there any way to modify the bootstrap carousel. i want to give an effect where the slide will be faded in and faded out instead of sliding left to right or right to left.
Yes you can modify the bootstrap carousel by overriding the CSS. Add the following <style> tag in your HTML page and it will fade in/out the carousel instead of sliding effect.
<style>
/* Fade transition for carousel items */
.carousel .item {
left: 0 !important;
-webkit-transition: opacity .4s; /*adjust timing here */
-moz-transition: opacity .4s;
-o-transition: opacity .4s;
transition: opacity .4s;
}
.carousel-control {
background-image: none !important; /* remove background gradients on controls */
}
/* Fade controls with items */
.next.left,
.prev.right {
opacity: 1;
z-index: 1;
}
.active.left,
.active.right {
opacity: 0;
z-index: 2;
}
</style>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am completely new to the jquery scene, and so am having some trouble trying to figure this out. My problem is:
I am creating a website for a project, and this website is based of a square (700px by 700px) that has been divided into 4 smaller squares - all 350px by 350px.
What I want to do is have each of these smaller squares have a panel covering them, that when clicked, move away to reveal the content behind them. The two panels on the left side would slide to the left and disappear, and the two on the right would slide to the right and disappear.
If possible I would like only one panel to disappear at a time. So as one would click a new panel, the previous one would slid back into position, hiding its content again.
Any help would be greatly appreciated!
There are many ways to do the sort of thing you're interested in. CSS transitions have already been mentioned. I've included a working example but it is very basic - it should get you moving in the right direction. Please take a look at the links below - they've got a lot of great information.
If you have four elements, and the main function of the covers is just to cover, you could use :after (or :before) CSS pseudo-elements. Here's what that HTML markup could look like if your panels were li elements:
<ul>
<li id="panelOne">One</li>
<li id="panelTwo">Two</li>
<li id="panelThree">Three</li>
<li id="panelFour">Four</li>
</ul>
Since the covers are only there to hide your four panels and they're pseudo-elements, you'd style them in your CSS. You could start by styling your HTML elements:
ul {
display: block;
background: black;
width: 700px;
height: 700px;
margin: 0 auto;
}
li {
float: left;
position: relative;
background: white;
border: 1px solid black;
width: 350px;
height: 350px;
}
Then style your :after covers:
li:after {
display: block;
/*the background color is just to make the covers more visible */
background: red;
position: absolute;
top: 0;
left: 0;
width: 350px;
height: 350px;
content: "";
}
If you use jQuery to add a class (for example, ".clicked") to one panel at a time, you'd style the .clicked pseudo-elements so they move to the left or right:
li#panelOne.clicked:after, li#panelThree.clicked:after {
-webkit-transform: translateX(-350px);
-moz-transform: translateX(-350px);
-ms-transform: translateX(-350px);
-o-transform: translateX(-350px);
transform: translateX(-350px);
}
li#panelTwo.clicked:after, li#panelFour.clicked:after {
-webkit-transform: translateX(350px);
-moz-transform: translateX(350px);
-ms-transform: translateX(350px);
-o-transform: translateX(350px);
transform: translateX(350px);
}
And use jQuery to add or remove the class:
$( 'li' ).click(function(){
//first remove the class from ALL panels
$( 'li' ).removeClass( 'clicked' );
//then add to the panel that's been clicked
$(this).addClass( 'clicked' );
});
And one more step: since you want the covers to slide to the left or right, you'll need to add CSS transitions to achieve that. You'd place them in your :after pseudo-element styles:
-webkit-transition: -webkit-transform 500ms ease-out 0s;
-moz-transition: -moz-transform 500ms ease-out 0s;
-o-transition: -o-transform 500ms ease-out 0s;
transition: transform 500ms ease-out 0s;
And here's how that would all look in a jsfiddle: http://jsfiddle.net/rt9d5/10/embedded/result/
Try using the Jquery UI Accordion http://jqueryui.com/accordion
You can create multiple collapsible panels and set whether it to have one panel open at a time (or multiple if you want).
My Suggestion would be to look at this, do a little research, and if you have any more questions post a more specific question on stackoverflow.