Skip to main content

How To Create Menu Slider


In this tutorial, we are going to learn on How To Create Menu Slider. This script is used to change the menu when your cursor will hover to the link menu list. It will show the menu list and its corresponding image screen shot immediately.

In this code below, we used jQuery script function to have this effect. And, the image screen shot has corresponding links.

HTML

This is the HTML code where the menu list and the link image screen shot found and you can edit after you download the source code. And put anything that you want.

  1. <div id="example_menu">
  2. <div class="example_title_menu active" id="shopping">Shopping Cart</div>
  3. <div class="example_title_menu" id="geometric">Geometric Shapes</div>
  4. <div class="example_title_menu" id="login-ii">Login Form II</div>
  5. <div class="example_title_menu" id="include">Include Files</div>
  6. <div class="example_title_menu" id="create">Create Password</div>
  7. <div class="example_title_menu" id="login">Login Form</div>
  8. </div>
  9.  
  10. <div id="example_slider">
  11. <a href="http://www.sourcecodester.com/php/10181/simple-shopping-cart-application-php-mysql.html">
  12. <img id="shopping-images" src="image/4.png">
  13. </a>
  14. <a href="http://www.sourcecodester.com/tutorials/htmlcss/10188/css-geometric-shapes.html">
  15. <img id="geometric-images" src="image/1.png">
  16. </a>
  17. <a href="http://www.sourcecodester.com/tutorials/javascript/10186/how-create-login-form-using-javascript-part-ii.html">
  18. <img id="login-ii-images" src="image/2.png">
  19. </a>
  20. <a href="http://www.sourcecodester.com/tutorials/php/10185/php-include-files.html">
  21. <img id="include-images" src="image/3.png">
  22. </a>
  23. <a href="http://www.sourcecodester.com/tutorials/javascript/10179/how-create-password-protect-using-javascript.html">
  24. <img id="create-images" src="image/6.png">
  25. </a>
  26. <a href="http://www.sourcecodester.com/node/10180">
  27. <img id="login-images" src="image/5.png">
  28. </a>
  29. </div>

CSS

This is our CSS style.

  1. <style type="text/css">
  2. #example_menu {
  3. width: 150px;
  4. float: left;
  5. }
  6.  
  7. #example_menu .example_title_menu {
  8. display: block;
  9. line-height: 35px;
  10. padding: 0px 10px;
  11. background: skyblue;
  12. margin-bottom:1px;
  13. color: #fff;
  14. cursor:pointer;
  15. }
  16.  
  17. #example_menu .example_title_menu:hover {
  18. display: block;
  19. line-height: 35px;
  20. padding: 0px 10px;
  21. background: blue;
  22. margin-bottom:1px;
  23. color: #000;
  24. cursor:pointer;
  25. font-size:15px;
  26. font-weight:bold;
  27. }
  28.  
  29. #example_menu .example_title_menu.active:after {
  30. content: "";
  31. border-color: transparent transparent transparent blue;
  32. border-style: solid;
  33. border-width: 18px;
  34. width: 0;
  35. height: 0;
  36. position: absolute;
  37. right: -50px;
  38. left: 158px;
  39. }
  40.  
  41. #example_slider {
  42. height: 215px;
  43. width: 400px;
  44. border: red 3px solid;
  45. left: 180px;
  46. position: absolute;
  47. padding: 8px;
  48. }
  49.  
  50. #example_slider img {
  51. display:none;
  52. position:absolute;
  53. }
  54. </style>

jQuery Script

This script happens if your cursor will hover to the menu list, then, the image will respond immediately from right to left for the slide effect.

  1. <script type="text/JavaScript">
  2. $(document).ready(function() {
  3. $("#example_slider img").first().show();
  4. $("#example_menu .example_title_menu").hover(
  5. function(){
  6. $('#example_menu .example_title_menu').removeClass('active');
  7. $(this).addClass('active');
  8. var menu_title = $(this).attr('id');
  9. $("#example_slider img").hide();
  10. $("#"+menu_title+"-images").show("slide",{direction:'right'},500);
  11. },
  12. function(){}
  13. );
  14. });
  15. </script>

So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Hope you find this tutorial useful. Thank you.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.