Creating a Floating Menu Using Prototype and CSS3
We needed an Absolute Floating Menu for our “Team” page for Udemy Project and developed something like this.
If you need something like this, you will find the pure code below.
Screenshot
Source Code
<!doctype html>
<html>
<head>
<title>Floating Menu</title>
<link rel="stylesheet" href="css/floating_menu.css" />
</head>
<body>
<div id="wrapper">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel urna odio. Nunc venenatis rutrum arcu, vel fermentum risus faucibus at. Quisque vestibulum volutpat quam semper tincidunt. Mauris sed cursus magna. Nam vel libero non felis convallis lacinia. Sed pellentesque eros sed mauris aliquam vel pretium risus ultrices. Nulla facilisi. Maecenas accumsan, dui et egestas dictum, justo nisl interdum ante, non placerat sem dui eget nunc. Nunc imperdiet pellentesque nulla, at volutpat nunc pulvinar non. Aenean nec dolor ac orci sollicitudin tempor sed vel velit. Vestibulum lectus mauris, lobortis vitae consectetur vitae, sagittis nec odio. Maecenas vulputate viverra tristique.</p>
<p>Etiam purus nibh, molestie quis blandit ut, tristique vel lorem. Proin at turpis felis. Suspendisse sit amet lectus vel lorem adipiscing tempus. Pellentesque ligula sem, rhoncus at placerat tempor, suscipit vitae urna. Vestibulum blandit, lorem vitae feugiat placerat, metus tellus commodo lacus, eu molestie neque purus volutpat nulla. Proin venenatis, massa vel bibendum malesuada, dui turpis imperdiet sapien, et rutrum turpis sem nec mauris. Curabitur pretium, eros id congue laoreet, nisl enim ultricies ligula, id dignissim purus lacus at est. Proin at sodales nisi. Sed porttitor est sed metus varius suscipit. Duis turpis lorem, gravida eget dignissim eu, blandit a sem. Phasellus dignissim sem nec ligula cursus id malesuada libero molestie. Integer erat ligula, vulputate cursus ultrices ultrices, varius ac libero. Maecenas tellus mi, sodales sed lobortis in, mattis vel risus. Vivamus nulla nisl, rhoncus in ultrices eget, tempus at turpis. Sed fermentum, nisi consequat viverra auctor, justo mi bibendum ipsum, vel mattis felis diam varius diam. Nulla mattis, arcu vel bibendum congue, augue arcu venenatis neque, pretium malesuada nulla urna in lorem. Fusce felis ipsum, ultricies sed iaculis vitae, dapibus ut ligula. Etiam at metus vitae mi lacinia suscipit ut sollicitudin tortor. Praesent euismod congue consequat. Pellentesque molestie placerat massa id rutrum.</p>
<p>Etiam mollis massa quis tellus sodales vitae aliquam eros rhoncus. Cras felis ante, commodo vitae posuere non, fermentum a mauris. Pellentesque sed tortor et nunc ultricies tincidunt commodo non sem. Ut quis sem imperdiet velit pulvinar molestie. Praesent malesuada enim at mi molestie at scelerisque ante semper. Ut eu sapien quis sapien tempor cursus. Pellentesque suscipit erat in lorem commodo rutrum. In gravida rutrum sapien, vitae mattis erat auctor non. Nam ultrices diam sit amet risus aliquam mollis. Sed porta mollis augue nec condimentum. Ut non tellus erat, vitae dictum quam. Nunc posuere tortor quis lacus viverra faucibus eu sit amet diam. Etiam sagittis sem quis nibh tincidunt porttitor. Suspendisse magna libero, pharetra non consectetur eu, pulvinar a tortor. Vivamus fringilla vestibulum felis vitae volutpat. Phasellus nunc ipsum, accumsan in vulputate nec, commodo vitae nibh.</p>
<p>Donec vestibulum ante id ligula malesuada in elementum nisl vulputate. Ut aliquam tempor tincidunt. Suspendisse potenti. Sed dolor lectus, ultrices at porta ullamcorper, ornare a sem. Phasellus vitae est eget quam ullamcorper interdum non vel risus. Vestibulum lobortis congue nisl sed iaculis. Vestibulum ante dui, facilisis ac ullamcorper ut, porta malesuada urna. Etiam convallis placerat est eu tempor. Integer eget ipsum in orci ultrices fringilla. Praesent vel ante magna, ut pulvinar libero.</p>
<p>Sed a pharetra augue. Etiam porttitor nunc eu velit ultrices bibendum. Nulla quis pharetra mi. Suspendisse potenti. Vestibulum pulvinar tempus hendrerit. Nulla sit amet arcu justo, eu molestie purus. Vivamus eleifend ultricies magna id molestie. Etiam a nulla sit amet libero tincidunt hendrerit nec viverra ante. Cras et facilisis augue. Vestibulum a mi libero, eget sollicitudin augue. Proin sollicitudin, leo ac imperdiet ornare, nisi augue fermentum nulla, consectetur viverra neque ante sed eros. Vivamus a consequat orci. Etiam aliquam purus eu metus tincidunt id volutpat dolor faucibus. Integer cursus, libero at malesuada auctor, magna arcu gravida nulla, sed gravida dolor enim vel neque. Nulla sodales nisl id felis condimentum commodo. Nunc dapibus, arcu quis dignissim interdum, massa quam dapibus orci, vel interdum diam diam molestie risus. Proin placerat feugiat ipsum sit amet elementum.</p>
<p>Nulla facilisi. Phasellus dapibus libero tempor sapien hendrerit non congue quam pretium. Vivamus est augue, tristique molestie lacinia at, mollis a nulla. Nulla quis leo urna, a interdum nunc. Mauris porta orci sit amet leo sollicitudin imperdiet vitae et leo. Fusce ullamcorper aliquet vulputate. Nulla volutpat volutpat scelerisque. Praesent mauris sapien, molestie in dapibus et, consequat sed dui. Donec et elit est, nec tempor quam. Donec commodo tristique lorem, at elementum nisl volutpat rutrum. Duis euismod ultrices elit sed elementum. Maecenas egestas sem at purus vulputate id viverra purus hendrerit. Nam vitae dolor quis dui pulvinar vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ornare imperdiet sem et tincidunt.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed volutpat dictum ipsum. In ut sapien est, eu eleifend urna. Sed cursus tempus interdum. Sed consequat porttitor justo, id interdum ligula lacinia in. Proin pretium augue sed nulla egestas a pretium lorem dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices tellus ut tortor sagittis laoreet. Maecenas ipsum nibh, euismod sed elementum quis, fermentum ac libero. Mauris pharetra egestas iaculis. Nunc vitae lectus tortor, eu vehicula nibh. Pellentesque a orci augue.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ornare, est nec molestie interdum, sem dui pulvinar nulla, ut porta leo neque vitae tellus. Nam sit amet tristique velit. Aliquam placerat, felis eget facilisis pellentesque, tellus nulla tristique est, ut auctor neque mauris sit amet enim. Pellentesque tempus fermentum eros ut fringilla. Aliquam sit amet ligula fringilla tellus pretium mollis eu eu eros. Vivamus at massa arcu. Donec sed dui eget enim lacinia aliquam laoreet eget turpis. Ut sem nisl, dapibus nec venenatis id, lobortis volutpat quam. Fusce sagittis mi eget tellus mattis eu malesuada felis blandit. Duis urna arcu, interdum vitae dapibus a, rhoncus placerat leo. Maecenas iaculis ultrices mi, sit amet scelerisque lectus rutrum ut. Nam sed lorem eget nisi lacinia facilisis vulputate nec libero. Nunc sit amet justo vitae urna dapibus sodales ut id massa. Cras mollis risus quis dui iaculis pellentesque.</p>
<p>Vivamus varius tellus ligula, et bibendum nulla. Phasellus mattis, lectus non interdum placerat, metus arcu molestie neque, ut lacinia justo ligula sed sapien. Sed id lorem vitae odio rhoncus tempus. Donec fermentum ultricies nunc, quis dictum mauris tempor id. Phasellus egestas erat eu mauris luctus viverra. In at neque risus. Suspendisse pharetra, libero id varius posuere, massa leo sagittis metus, nec accumsan mauris eros in turpis. Ut rutrum, nisl non blandit tincidunt, magna ligula iaculis sem, eu molestie lacus dolor vel purus. Vivamus nec leo nec lectus hendrerit rhoncus ornare at ante. Vivamus ac tortor sem.</p>
<p>Praesent ipsum tellus, volutpat et accumsan non, aliquet eu est. Praesent lectus ligula, dictum ut cursus id, blandit a enim. Nulla facilisi. Morbi sagittis commodo sollicitudin. Duis quam sapien, tincidunt sed auctor eget, gravida et arcu. Etiam sed turpis est, non mollis risus. Donec venenatis libero eget mi tristique nec suscipit lacus varius. Nam malesuada dapibus dolor quis cursus. Donec eu faucibus sapien. Ut pulvinar arcu et lorem luctus commodo. Duis ac arcu eget neque vulputate sollicitudin at et nibh. Sed viverra turpis sit amet ligula aliquet eget ultricies nisl laoreet. Curabitur lacinia sapien eu massa vestibulum placerat facilisis justo luctus. Nunc eget urna a nulla consequat gravida.</p>
<p>In sed magna a ante volutpat hendrerit. Nunc quis risus in urna pulvinar lacinia consequat at quam. Cras vitae bibendum orci. Integer porta ornare vehicula. Phasellus facilisis dapibus diam eget semper. Donec vulputate enim a lacus dignissim congue. Nam bibendum sollicitudin quam sed gravida. Fusce semper mattis diam, quis interdum magna sagittis dapibus. Mauris tincidunt, tellus non tincidunt ultrices, odio metus fringilla enim, quis congue sapien purus eu lacus. Nunc lorem magna, vehicula et molestie id, aliquet et turpis. Mauris vehicula risus erat, pharetra porta augue. Nulla aliquet egestas neque varius vulputate. Vivamus at dolor molestie velit tincidunt blandit et nec erat. Pellentesque interdum fringilla fringilla. Fusce dignissim placerat ante, sed porttitor orci euismod et. Duis in est sed justo vehicula mattis ac id erat. Nunc augue arcu, interdum sed cursus ut, pretium vel ligula. Fusce nulla sapien, pellentesque eu volutpat eu, iaculis at ante. In aliquet turpis eu erat lobortis hendrerit.</p>
<p>Sed ac odio porttitor odio egestas dictum quis nec arcu. Duis ac dictum sapien. Maecenas mollis tellus id lacus semper ultrices. Nunc a arcu non mauris rutrum volutpat. Integer ultrices pretium dolor ut ultricies. Nunc libero mi, porttitor eu ornare eget, vehicula vel diam. Aliquam at lorem ac ipsum rutrum auctor. Nam eleifend felis eu risus pellentesque suscipit. Integer nunc mauris, ornare eget gravida non, pharetra quis ipsum. Vivamus auctor velit a elit placerat faucibus.</p>
</div>
<div id="sidebar">
<p id="text">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ornare, est nec molestie interdum, sem dui pulvinar nulla, ut porta leo neque vitae tellus.</p>
<ul id="side_tabs" class="floating_menu">
<li><a href="" class="on"><b></b>About Us</a></li>
<li><a href=""><b></b>Jobs</a></li>
<li><a href=""><b></b>Terms of Use</a></li>
<li><a href=""><b></b>Privacy Policy</a></li>
<li><a href=""><b></b>Contact Us</a></li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script src="js/floating_menu.js"></script>
</body>
</html>var floatingMenu = Class.create({
initialize : function(elm, options) {
elm.each(function(elm){
var menu = elm;
var topOfMenu = menu.cumulativeOffset().top;
Event.observe(window,'scroll', function(evt) {
var y = document.viewport.getScrollOffsets().top;
if (y >= topOfMenu) {
menu.addClassName('fixed');
} else {
menu.removeClassName('fixed');
}
});
}.bind(this));
this.options = Object.extend({}, options || {});}
});document.observe("dom:loaded", function() {
new floatingMenu($$('.floating_menu'));
});body{
font-family: sans-serif;
background: #fff;
}
.fixed{
position: fixed!important;
left: 50%;
top:0;
margin-left: 280px;
}
#wrapper{
width: 960px;
margin: 0 auto;
overflow: hidden;
}
#content{
width: 720px;
float: left;
}
#sidebar{
width: 200px;
float: right;
}#side_tabs{
margin-top:20px;
padding:0;
list-style: none;
line-height: 30px;
width: 200px;
}
#side_tabs li{
margin-bottom: 5px;
}
#side_tabs li a{
position:relative;
display: inline-block;
width:100%;
background: #E0E0E0;
color:#444;
font-weight: bold;
text-indent: 10px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomright:5px;
border-top-right-radius: 5px;
border-bottom-right-radius:5px;
text-decoration: none;
}
#side_tabs li a b{
border:15px solid;
border-color:#fff #E0E0E0 #fff #fff;
display: inline-block;
height: 0;
left: -24px;
position: absolute;
top: 0;
width: 0;
}
#side_tabs li a:hover,
#side_tabs li a.on{
background: #dfeaf4;
}
#side_tabs li a:hover b,
#side_tabs li a.on b{
border-right-color:#dfeaf4;
}Special Thanks to AaronVisit here for jQuery Version.This post is also very useful.
