We Keep Coding

Trying to have one div slide down from behind another div on hover

I'm trying to have a div with some text that slides down another div with more text when hovered over. I'm currently having difficulty achieving this. If a good solution includes JQuery, could you guys ELI5 (I've never used JQuery before)? The current attempt laid out below has the basis of what I'm looking for. I just want there to be an animation on hover showing the additional text sliding down, instead of it suddenly appearing.
.container {
font-size: 2em;
box-shadow: 0px 0px 3px 1px black;
margin: 20px;
padding: 20px;
background-color: #E7E7EF;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
width: 80%;
margin-top: 50px;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.below {
display: none;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.container:hover .below {
display: block;
}
<div class="container">
<div class="above">
<p>
Some text in the above div
</p>
</div>
<div class="below">
<p>
More text that slides down from under the above div
</p>
</div>
</div>

Use overflow instead of display
https://jsfiddle.net/yb6vct8a/1/
.container {
font-size: 2em;
box-shadow: 0px 0px 3px 1px black;
margin: 20px;
padding: 20px;
background-color: #E7E7EF;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
width: 80%;
margin-top: 50px;
-webkit-transition: max-height 0.8s;
-moz-transition: max-height 0.8s;
transition: max-height 0.8s;
}
.below {
max-height: 0;
overflow: hidden;
/* Set our transitions up. */
-webkit-transition: max-height 0.8s;
-moz-transition: max-height 0.8s;
transition: max-height 0.8s;
}
.container:hover .below {
max-height: 200px;
}

Slide dynamic text on hovering a different element

I am breaking my head to get the div content to slide before appearing when I hover over the relevant item that is suppose to change the content of the div dynamically using jquery. The content just changes but I would like them to slide, I have tried various things but in vain.
Please excuse me if my question is silly, I am new to Jquery.
HTML
<div class="servdescripitems">
<h3>Heading 1</h3>
<p>Paragraph of first service</p>
<ul>
<li>Heading 1 list 1</li>
<li>Heading 1 list 2</li>
</ul>
<div class="button">Service 1</div>
</div>
<ul class="serviceslist">
<li class="service1"></li>
<li class="service2"></li>
<li class="service3"></li>
</ul>
Jquery
$('.service1').mouseover(function() {
$('.servdescripitems').html('<h3>Heading 1</h3><p>Paragraph of first service</p><ul><li>Heading 1 list 1</li><li>Heading 1 list 2</li></ul><div class="button">Service 1</div>');
});
$('.service2').mouseover(function() {
$('.servdescripitems').html('<h3>Heading 2</h3><p>Paragraph of second service</p><ul><li>Heading 2 list 1</li><li>Heading 2 list 2</li></ul><div class="button">Service 2</div>');
});
$('.service3').mouseover(function() {
$('.servdescripitems').html('<h3>Heading 3</h3><p>Paragraph of second service</p><ul><li>Heading 3 list 1</li><li>Heading 3 list 2</li></ul><div class="button">Service 3</div>');
});
CSS
.servdescripitems {
width: 100%;
height: 400px;
}
.servdescripitems h3 {
text-align: center;
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 15pt;
color: #ed1f24;
margin-bottom: 10px;
}
.servdescripitems p {
font-family: 'Lato', sans-serif;
font-weight: normal;
font-size: 12pt;
margin-bottom: 15px;
}
.servdescripitems ul{
list-style-image: url("../images/servicelist.png");
padding-left: 30px;
}
.servdescripitems li {
font-family: 'Lato', sans-serif;
font-weight: normal;
font-size: 12pt;
padding-bottom: 5px;
}
.button {
border-top: 1px solid #7e7e7e;
background: #3b363b;
background: -webkit-gradient(linear, left top, left bottom, from(#7e7e7e), to(#3b363b));
background: -webkit-linear-gradient(top, #7e7e7e, #3b363b);
background: -moz-linear-gradient(top, #7e7e7e, #3b363b);
background: -ms-linear-gradient(top, #7e7e7e, #3b363b);
background: -o-linear-gradient(top, #7e7e7e, #3b363b);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-family: 'Lato', sans-serif;
font-size: 11pt;
font-weight: bold;
text-decoration: none;
text-align: center;
width: 150px;
height: 20px;
margin: 5px auto;
}
.button:hover {
border-top-color: #ed1f22;
background: #ed1f22;
color: #ffffff;
cursor: pointer;
}
.button:active {
border-top-color: #ed1f22;
background: #ed1f22;
}
.serviceslist {
width: 80%;
margin: 0 auto;
}
.serviceslist li {
margin-bottom: 3px;
margin-right: 30px;
float: left;
}
.service1 {
background: rgba(0, 0, 0, 0) url("../images/service1.png") no-repeat scroll 0 0;
background-position: 0 0;
height: 100px;
width: 100px;
background-color: #f6f6f6;
border: 2px solid #ed1f24;
border-radius: 100px;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
cursor: pointer;
}
.service2 {
height: 100px;
width: 100px;
background-color: #f6f6f6;
border: 2px solid #ed1f24;
border-radius: 100px;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
cursor: pointer;
}
.service3 {
height: 100px;
width: 100px;
background-color: #f6f6f6;
border: 2px solid #ed1f24;
border-radius: 100px;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
cursor: pointer;
}
I have fiddled the script here

with jQuery the simplest slides are Up and Down as they are built-in.
I've added a div inside your current service details container, so the container's size is not affected when sliding content in/out
This is how I've updated each of your mouseover functions:
$('.service1').mouseover (function() {
//check if current service shown is not the same - this avoids sliding to same content
if(inside_div.attr("current-service")!="1"){
//slideUp current content
inside_div.slideUp(function(){
//once slideUp is finished, change the content of the inside div...
inside_div.html('<h3>Heading 1</h3><p>Paragraph of first service</p><ul><li>Heading 1 list 1</li><li>Heading 1 list 2</li></ul><div class="button">Service 1</div>');
// ... then tell the div what service content it now has, and slide it back down
inside_div.attr("current-service","1").slideDown();
});
}
});
Here's an updated fiddle:
https://jsfiddle.net/g66aa0oo/
Let me know if any further explanation is needed.
Also See: https://api.jquery.com/slideUp/
If you really want left/right sliding, I'd recommend looking at a carousel effect plug-in such as slick

Creating a moving bar (inside the nav bar) which moves to the element the user hovers on?

I'm trying to create a nav bar which consists of the regular navigation elements and an indication bar which is located below the current page. My goal is to make this bar move under whichever element the user hovers on and automatically resize itself according to a pre-defined size (according to the word length maybe?). I built the nav bar itself, but I'm kind of clueless how to achieve this effect. Should I always calculate the current position of the mouse and add the difference between the current location and the hover location? Regarding to the resizability, this is a secondary goal, less significant.
This is what I've done so far:
Html:
<header class="header">
<div class="logo">
<nav id="nav_bar">
<ul id="nav_ul">
<li>apples</li>
<li>bananas</li>
<li>tomatos</li>
<li>onions</li>
</ul>
<div id="container">
<div id="bar"></div>
</div>
</nav>
</div>
</header>
CSS:
#nav_ul a{
color: #685e6d;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
}
#nav_ul{
display: inline-block;
list-style-type: none;
}
#nav_ul li{
display: inline-block;
position: relative;
left: 90px;
bottom: 30px;
font-size: 19px;
margin-left: 40px;
font-weight: 100;
font-size: 16px;
}
#nav_ul a:hover{
color: #4ad1fd;
}
#container{
position: relative;
left: 167px;
height: auto;
width: 530px;
top: 5px;
}
#bar{
position: absolute;
left: 0;
bottom: 0;
height: 7px;
width: 107px;
background-color: #ffcc00;
border-radius: 3px;
}
JSfiddle
Something like in this image:

You're trying to create a lavalamp menu, checkout the example below...
/* ---- reset ------*/
html, body, div, a {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline; }
html {
line-height: 1; }
/* --- basic styles ----*/
body {
font-family: "Unica One";
font-size: 1.5em;
background: #f2f2f2;
text-shadow: 0 1px 0 white; }
/* --- for this example ----*/
.nav {
text-align: center;
overflow: hidden;
margin: 2em auto;
width: 480px;
position: relative; }
.nav a {
display: block;
position: relative;
float: left;
padding: 1em 0 2em;
width: 25%;
text-decoration: none;
color: #393939;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s; }
.nav a:hover {
color: #c6342e; }
.effect {
position: absolute;
left: -12.5%;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
left: 12.5%; }
.nav a:nth-child(2):hover ~ .effect {
left: 37.5%; }
.nav a:nth-child(3):hover ~ .effect {
left: 62.5%; }
.nav a:nth-child(4):hover ~ .effect {
left: 87.5%; }
/* ----- line example -----*/
.ph-line-nav .effect {
width: 90px;
height: 2px;
bottom: 36px;
background: #c6342e;
box-shadow: 0 1px 0 white;
margin-left:-45px;
}
<div class="ph-line-nav nav">
Home
About
Gallery
Contact
<div class="effect"></div>
</div>
Find more here http://pepsized.com/css-only-lavalamp-like-fancy-menu-effect/

Here's a jQuery solution: (JSFiddle for if the code snippet doesn't work)
function BarMove(el) {
var bar = $('#bar');
var width = el.outerWidth();
var left = el.offset().left;
bar.animate({
width: width,
left: left
});
}
var Current = $('#nav_ul li a.current'); // Set the current page
BarMove(Current);
$('#nav_ul li a').hover(function () {
BarMove($(this));
}, function () {
BarMove(Current);
});
#nav_ul a {
color: #685e6d;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
}
#nav_ul {
display: inline-block;
list-style-type: none;
}
#nav_ul li {
display: inline-block;
position: relative;
left: 90px;
bottom: 30px;
font-size: 19px;
margin-left: 40px;
font-weight: 100;
font-size: 16px;
}
#nav_ul a:hover {
color: #4ad1fd;
}
#container {
position: relative;
left: 0;
height: auto;
width: 530px;
top: 5px;
}
#bar {
position: absolute;
left: 0;
bottom: 0;
height: 7px;
width: 107px;
background-color: #ffcc00;
border-radius: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
<div class="logo">
<nav id="nav_bar">
<ul id="nav_ul">
<li>apples
</li>
<li>bananas
</li>
<li>tomatos
</li>
<li>onions
</li>
</ul>
<div id="container">
<div id="bar"></div>
</div>
</nav>
</div>
</header>
It's not exact, so you'll need to tweak the numbers but functionality is what you're after as far as I'm aware.

In your CSS, you have #nav_ul a:hover so you could add border-bottom-style: solid; border-color:<color> and you would have a bar appear under your items. It wouldn't slide, or be animated. It will, however, put a colored bar under what ever they are hovering over.

Make CSS menu items and title expand to correct width

I am stuck trying to expand menu items to full width. For some reason they are indented..
Also if I expand the menu name with more characters, it messes up the formatting. I'm trying to make it expand automatically, but if I remove the 'width' property it becomes messed up.
Thanks!
Fiddle code: http://jsfiddle.net/n877s/5/
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>username</span>
<ul class="dropdown">
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
​
CSS
.wrapper-dropdown-3 .dropdown {
/* Size & position */
position: absolute;
top: 140%;
left: 0;
right: 0;
/* Styles */
background: black;
border-radius: inherit;
border: 1px solid rgba(0,0,0,0.17);
box-shadow: 0 0 5px rgba(0,0,0,0.1);
font-weight: normal;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
list-style: none;
/* Hiding */
opacity: 0;
pointer-events: none;
}
.wrapper-dropdown-3 .dropdown:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 15px;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #fff transparent;
}
.wrapper-dropdown-3 .dropdown:before {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 13px;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: rgba(0,0,0,0.1) transparent;
}
.wrapper-dropdown-3 .dropdown li a {
display: block;
padding: 10px;
text-decoration: none;
color: #8aa8bd;
border-bottom: 1px solid #e6e8ea;
box-shadow: inset 0 1px 0 rgba(255,255,255,1);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.wrapper-dropdown-3 .dropdown li i {
float: right;
color: inherit;
}
.wrapper-dropdown-3 .dropdown li:first-of-type a {
border-radius: 7px 7px 0 0;
}
.wrapper-dropdown-3 .dropdown li:last-of-type a {
border: none;
border-radius: 0 0 7px 7px;
}
/* Hover state */
.wrapper-dropdown-3 .dropdown li:hover a {
background: #f3f8f8;
}
/* Active state */
.wrapper-dropdown-3.active .dropdown {
opacity: 1;
pointer-events: auto;
}
/* No CSS3 support */
.no-opacity .wrapper-dropdown-3 .dropdown,
.no-pointerevents .wrapper-dropdown-3 .dropdown {
display: none;
opacity: 1; /* If opacity support but no pointer-events support */
pointer-events: auto; /* If pointer-events support but no pointer-events support */
}
.no-opacity .wrapper-dropdown-3.active .dropdown,
.no-pointerevents .wrapper-dropdown-3.active .dropdown {
display: block;
}

I hope this is what u need. Changed just a few things like left padding from dropdown class (spacing fix), changed width to auto on .wrapper-dropdown-3, and added some spacing around carret.
http://jsfiddle.net/n877s/8/
I added dummy text in button,just for testing purposes, and it works well.

Indentation is caused by ULs default left padding (or in any browsers padding), it´s 40px. So, set
.wrapper-dropdown-3 {margin-left: 0; padding-left: 0;}
If you have longer items in submenu and don't want set the width, you can force one-line items using
white-space: nowrap;

I can't center a button and fix it to the browsers footer?

http://i.imgur.com/SXgTt.png
You see removing these two will make the image work, but it don't stick to the footer when viewed in browser
here's how its look like
http://i.imgur.com/gdBMr.png
and here's the css with html
<style>
body {
text-align: center;
background-color: #080707;
font-family: "Open Sans", sans-serif;
}
.enter {
display: block;
width: 165px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 30px;
border: 2px solid #c52f30;
color: #cf2f32;
margin: 30px auto 0;
text-decoration: none;
position:fixed;
bottom:23px;
}
.enter:hover {
background: #cf2f32;
color: white;
-webkit-transition: background 0.4s ease, color 0.4s ease;
-moz-transition: background 0.4s ease, color 0.4s ease;
-o-transition: background 0.4s ease, color 0.4s ease;
-ms-transition: background 0.4s ease, color 0.4s ease;
transition: background 0.4s ease, color 0.4s ease; }
</style>
<body>
<p><img src="images/fullbg.png" style='width:100%; max-width: 800px;' border="0" alt="Null"></p>
Enter
</body>

I don't think you can use the auto margins trick if the element is set to position fixed. But you can have it this way:
.enter {
display: block;
width: 165px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 30px;
border: 2px solid #c52f30;
color: #cf2f32;
margin: 30px 0 0 -82px;
text-decoration: none;
position:fixed;
left: 50%;
bottom:23px;
}
Just set the left margin to be half of the element's width.

I cant see images, buy you can try;
.enter {
display: block;
width: 165px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 30px;
border: 2px solid #c52f30;
color: #cf2f32;
margin: 0 0 0 -83px;;
text-decoration: none;
position:fixed;
bottom:23px;
left:50%;
}