How To Create Scrolling Menu

Submitted by alpha_luna on Monday, April 18, 2016 - 15:45.
In this tutorial, we are going to learn on How To Create Scrolling Menu. It will help the user to navigate the menu easily. And it will increase the menu usability. This is a fixed position scrolling menu that we have right now. And, we added a jQuery effect to scrolling smoothly. Menu HTML This is our scrolling menu.
  1. <div id="scrolling-menu">
  2.     <div id="Deluxe">Deluxe</div>
  3.     <div id="Super">Super Deluxe</div>
  4.         <div id="Matrimonial">Matrimonial Room</div>
  5.         <div id="Junior">Junior Suite</div>
  6.         <div id="Executive">Executive Suite</div>
  7. </div>
Also, this is our scrolling content.
  1. <div id="scroll-content">
  2. <div id="Deluxe-content">
  3. <h1>Deluxe</h1>
  4. This elegantly appointed room has 2 beds, a double bed and a single bed. It also comes with a writing desk and a coffee table set. The dimension of this room is 30 sqm. / 323 sqft.
  5. </div>
  6.  
  7. <div id="Super-content">
  8. <h1>Super Deluxe</h1>
  9. The super deluxe rooms are also known as the Business Class guest room with 2 beds, a double bed and a single bed. Relax and unwind after a long day and enjoy the bathtub in the cozy room. The dimension of this room is 30 sqm. / 323 sqft.
  10. </div>
  11.  
  12. <div id="Matrimonial-content">
  13. <h1>Matrimonial Room</h1>
  14. The spacious matrimonial room is similar to the deluxe room but with one king bed and a larger room area.
  15. </div>
  16.  
  17. <div id="Junior-content">
  18. <h1>Junior Suite</h1>
  19. The junior suite is a one bedroom suite with a king bed and comes with spacious sitting room. It is furnished with a dining set for 4 guests, a coffee table with two armchairs and a writing desk. The one and only Junior Suite is located at the fourth floor. The dimension of this room is 48 sqm. / 517 sqft.
  20. </div>
  21.  
  22. <div id="Executive-content">
  23. <h1>Executive Suite</h1>
  24.  There are 4 executive suites, three of which are a 2 room suite, while the other is a 1 bedroom suite. Designed for informal meetings and entertaining guests, the suites have a separate sitting room with a comfortable sofa, armchair, desk and dining table. The dimension of this room is 64 sqm. / 689 sqft.
  25.  </div>
  26. </div>
And, this is our style.
  1. <style type="text/css">
  2. #scrolling-menu {
  3.         position: fixed;
  4.         width: 150px;
  5.         margin-top:10px;
  6. }
  7. #scrolling-menu div {
  8.         padding:11px;
  9.         background: antiquewhite;
  10.         color: blue;
  11.         cursor:pointer;
  12.         border:blue 1px solid;
  13. }
  14. #scrolling-menu div:hover {
  15.         padding:11px;
  16.         margin-bottom:1px;
  17.         background: #C7B3B3;
  18.         color: red;
  19.         cursor:pointer;
  20.         border:red 1px solid;
  21. }
  22. #scroll-content {
  23.         border-left:#CCC 4px solid;
  24.         margin-left:150px;
  25.         padding-left:60px;
  26.         color:black;
  27. }
  28. #scroll-content div {
  29.         margin-bottom: 60px;
  30. }
  31. h1 {
  32.         color:blue;
  33. }
  34. h1:hover {
  35.         color:red;
  36.         cursor:pointer;
  37. }
  38. </style>
jQuery Scrolling Effect This script is used for our menu to have a smooth effect when the user scrolling the page.
  1. <script src="js/code_js.js"></script>
  2.  
  3. <script>
  4. $(document).ready(function (){
  5.         $(window).scroll(function(e){
  6.                 if ($(window).scrollTop() > ($('#scroll-content').height() - $('#scrolling-menu').height())){
  7.                         var scroll = $('#scroll-content').height() - $('#scrolling-menu').height();
  8.                         $(window).scrollTop(scroll);
  9.                         return false;
  10.                 }
  11.         });
  12.        
  13.         $('#scrolling-menu div').click(function() {
  14.                 var target = $(this).attr('id');
  15.                 $('html, body').animate({scrollTop: $('#'+target+'-content').offset().top}, 1000);
  16.         });    
  17. });
  18. </script>
Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.
Tags
menu scrolling
scrolling

Add new comment

About text formats
  • 21 views