CODEWITHSUNDEEP
jqueryhtmlcss
user2579060
user2579060

Reputation:

i want to expand div to left with its hidden child divs?

I want to make sidebar div which have child divs hidden in it.when rollover the parent div it will expand and child divs exposed and on rollout div back to its original size collapse. I want my sidebar similar to this one. http://www.hosting.com/ its contact sidebar and i really want like this.

CSS

#Sidebar {
    width: 40px;
    height: 40px;
    margin-right: 0px;
    top: 300px;
    position: fixed;
    right: 0px;
    background-image: url(chat.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFF;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
    background-color: #F90;
    }
#Sidebar:hover {
    height: 50px;
    width: 100px;
}
.divchild {
    height: 25px;
    width: 25px;
    background-color: #0F3;
    top: 5px;
    right: 0px;
    margin: auto;
    position: relative;
}

Html

<a href="#">
<div class="Sidbaredges" id="Sidebar">
 <div class="divchild"></div>
 </div>
</a>

Upvotes: 0

Views: 134

Answers (4)

yeyene
yeyene

Reputation: 7380

Check this DEMO http://jsfiddle.net/yeyene/hGKLj/

$(document).ready(function () {
    $("#Sidebar, #Sidebar .divchild").mouseover(function () {
        $(this).stop().animate({ right: '0px'}, 600);
    }).mouseout(function () {
        $(this).stop().animate({ right: '-170px'}, 600);
    });
});

Upvotes: 0

user2568107
user2568107

Reputation:

This fiddle is right used css and jquery

http://jsfiddle.net/UcQf4/3/

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

try this

http://jsfiddle.net/mqzMx/

CSS

#Sidebar {
    width: 40px;
    height: 40px;
    margin-right: 0px;
    top: 300px;
    position: fixed;
    right: 0px;
    background-image: url(chat.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFF;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
    background-color: #F90;


}
#Sidebar:hover {
    height: 50px;
    width: 100px;
    float:left;
}
.divchild {
    height: 25px;
    width: 25px;
    background-color: #0F3;
    top: 7px;
    left: 10px;
    margin: auto;
    position: relative;
    text-align:left;
    display:inline-block;
}

Upvotes: 1

Ravi
Ravi

Reputation: 463

<!DOCTYPE HTML>
<head>
<script type="text/javascript">
function mouse_over()
{
    document.getElementById('divchild').style.display = 'block';
}
function mouse_out()
{
    document.getElementById('divchild').style.display = 'none';
}
</script>
<style type="text/css">
#Sidebar {
    width: 40px;
    height: 40px;
    margin-right: 0px;
    top: 300px;
    position: fixed;
    right: 0px;
    background-image: url(chat.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFF;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
    background-color: #F90;
}
#Sidebar:hover {
    height: 50px;
    width: 100px;
}
.divchild {
    height: 25px;
    width: 25px;
    background-color: #0F3;
    top: 5px;
    right: 0px;
    margin: auto;
    position: relative;
}

</style>
<meta charset="UTF-8">
<title>css test</title>
</head>
<body>
<a href="#">
<div class="Sidbaredges" id="Sidebar" onMouseOver="mouse_over();" onMouseOut="mouse_out();">
  <div class="divchild" id="divchild" style="display:none;"></div>
</div>
</a>
</body>
</html>

I also use javascript.

Upvotes: 0

Related Questions