Floating menu using Jquery plugin | 2my4edge

06 May 2013

Floating menu using Jquery plugin

floating div or floating menu concept is usually used for the purpose of fixed or absolute positions of ads or some other important thing, so that we are using this floating menu concept, align and decorate the web page with these kind of page representation with like this kind of menu or div styles makes the page simple and desgin. let see how it works with Jquery plugin.
Floating menu

DOWNLOAD CODE       DEMO

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 should have to call the id or class to make floating menu. make positioning the div element that's what here we discuss. that sticky floating menu or div is make some animation and positioning 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 make it as design and colorful. That's it... the page demo,, see the side div..


RELATED POSTS:

Change background image while page refresh using Javascript

 Better and Flexible Tooltip using LiteTooltip.js

 Change the colored image into black and white image on image hover

 Browser full screen API using Query

 Image Zoommer like E-commerce site using multizoom.js

 Change text & background color while selecting text using CSS3

 Create custom file chosen input type using Css and Jquery

3 comments:

Subscribe to: Post Comments (Atom)
^