How To Create Menu Slider

Submitted by alpha_luna on Saturday, April 9, 2016 - 12:12.
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.

Tags

Add new comment

About text formats
  • 71 views