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.

Download