floating div or floating menu idea is
typically utilized with the end goal of altered or outright positions of ads or
some other critical thing, so we are utilizing this floating menu idea, adjust
and design the website page with these sort of page representation with like
this sort of menu or div styles makes the page straightforward and design. Let
perceive how it functions with Jquery plugin.
CODE highlighted lines are scripts
<!DOCTYPE html>
<html lang="en">
<head>
<title>floating menu</title>
<meta charset="UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='stickyfloat.min.js'></script>
</head>
<body>
<div class="content">
<div class="div1">
<h3>Div 1 floating</h3>
</div>
<div class='div2_wrap'>
<div class="div1 div2" >
<h3>Div 2 floating</h3>
</div>
</div>
</div>
<script>
$('.div1').stickyfloat();
$('.div2').stickyfloat('update',{ duration:0 });
</script>
</body>
</html>
Like
the above script we ought to need to call the id or class to make floating menu.
Make situating the div component that is the thing that here we examine. that
sticky gliding menu or div is make some animation and situating the div.
CSS
<style TYPE="text/css">
.content{
padding:50px;
width:600px;
height:3000px;
margin:0 auto;
background-color:#f1f1f1;
position:relative;
}
.div1{
position:absolute;
left:10px;
margin-bottom:100px;
padding:15px;
width:130px;
background:#0CF;
color:#FFF;
}
.div2_wrap{
position:absolute;
top:250px;
right:0;
bottom:30px;
}
.div2{
top:120px;
right:10px;
left:auto;
background-color:#6C6;
}
</style>
The above is CSS style to build it as design and colorful. That's it... the page demo, see the side div...
No comments:
Post a Comment