Drop Down Notification Just Like FaceBook

Submitted by rinvizle on Saturday, July 2, 2016 - 12:54.
This tutorial we’re going to create a simple drop-down list using JavaScript and CSS. Which allows the user to select one value from a list. Drop-down list or menu provides a hierarchical overview of the subsections contained within the menu item that spawned it. All the subsections within a section of a site when you hover your mouse cursor over it. Look for the example image below. Result

Sample Code

Here is the example of JavaScript Syntax shown below. 
  1. $(function() 
  2. {
  3. $(".view_comments").click(function() 
  4. {
  5. var ID = $(this).attr("id");
  6.  
  7. $.ajax({
  8. type: "POST",
  9. url: "viewajax.php",
  10. data: "msg_id="+ ID, 
  11. cache: false,
  12. success: function(html){
  13. $("#view_comments"+ID).prepend(html);
  14. $("#view"+ID).remove();
  15. $("#two_comments"+ID).remove();
  16. }
  17. });
  18.  
  19. return false;
  20. });
  21. });
And for the CSS style. 
  1. {
  2. 	margin: 0;
  3. 	padding: 0;
  4. }
  5.  
  6. body {
  7. 	font-family: "Trebuchet MS", Helvetica, Sans-Serif;
  8. 	font-size: 14px;
  9. }
  10.  
  11. a {
  12. 	text-decoration: none;
  13. 	color: #838383;
  14. }
  15.  
  16. a:hover {
  17. 	color: black;
  18. }
  19.  
  20. #menu {
  21. 	position: relative;
  22. 	margin-left: 30px;
  23. }
  24.  
  25. #menu a {
  26. 	display: block;
  27. 	width: 140px;
  28. }
  29.  
  30. #menu ul {
  31. 	list-style-type: none;
  32. }
  33.  
  34. #menu li {
  35. 	float: left;
  36. 	position: relative;
  37. 	text-align: center;
  38. }
  39.  
  40. #menu ul.sub-menu {
  41. 	position: absolute;
  42. 	left: -10px;
  43. 	z-index: 90;
  44. 	display:none;
  45. }
  46.  
  47. #menu ul.sub-menu li {
  48. 	text-align: left;
  49. }
  50.  
  51. #menu li:hover ul.sub-menu {
  52. 	display: block;
  53. }
  54. a
  55. {	text-decoration:none; }
  56. .egg
  57. {
  58. position:relative;
  59. box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  60. background-color:#fff;
  61. border-radius: 3px 3px 3px 3px;
  62. border: 1px solid rgba(100, 100, 100, 0.4);
  63. }
  64. .egg_Body{border-top:1px solid #D1D8E7;color:#808080;}
  65. .egg_Message{font-size:13px !important;font-weight:normal;overflow:hidden}
  66.  
  67. h3{font-size:13px;color:#333;margin:0;padding:0}
  68. .comment_ui
  69. {
  70. border-bottom:1px solid #e5eaf1;clear:left;float:none;overflow:hidden;padding:6px 4px 3px 6px;width:431px; cursor:pointer;
  71. }
  72. .comment_ui:hover{
  73. background-color: #F7F7F7;
  74. }
  75. .dddd
  76. {
  77. background-color:#f2f2f2;border-bottom:1px solid #e5eaf1;clear:left;float:none;overflow:hidden;margin-bottom:2px;padding:6px 4px 3px 6px;width:431px; 
  78. }
  79. .comment_text{padding:2px 0 4px; color:#333333}
  80. .comment_actual_text{display:inline;padding-left:.4em}
  81.  
  82. ol { 
  83. 	list-style:none;
  84. 	margin:0 auto;
  85. 	width:500px;
  86. 	margin-top: 20px;
  87. }
  88. #mes{
  89. 	padding: 0px 3px;
  90. 	border-radius: 2px 2px 2px 2px;
  91. 	background-color: rgb(240, 61, 37);
  92. 	font-size: 9px;
  93. 	font-weight: bold;
  94. 	color: #fff;
  95. 	position: absolute;
  96. 	top: 5px;
  97. 	left: 73px;
  98. }
  99. .toppointer{
  100. background-image:url(top.png);
  101.     background-position: -82px 0;
  102.     background-repeat: no-repeat;
  103.     height: 11px;
  104.     position: absolute;
  105.     top: -11px;
  106.     width: 20px;
  107. 	right: 354px;
  108. }
  109. .clean { display:none}
So at this time you can now try to test this application by importing a database file drops.sql. And the source code is totally available in this site. And you could just copy and paste the code and modify it apart for yourselves. Hopefully you enjoy reading and you find it helpful.

Tags

Add new comment

About text formats
  • 332 views