Advertisement
b0rn-to-be-wild

NAVIGATION MENU CSS right

Mar 3rd, 2018
203
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.92 KB | None | 0 0
  1. Paste the following code under <style type="text/css">:
  2.  
  3. /*----- NAVIGATION MENU by borntobewildcodes (right) -----*/
  4.  
  5. /* You can change the placement of this box and set position value to fixed */
  6.  
  7. #navigation_menu{
  8. position:absolute;
  9. margin-top:50px;
  10. right:10px;
  11. width:40px;
  12. height:40px;
  13. background:{color:Navigation menu background};
  14. line-height:43px;
  15. z-index:1000;
  16. -webkit-transition: all 0.7s ease;
  17. -moz-transition: all 0.7s ease;
  18. -o-transition: all 0.7s ease;
  19. }
  20.  
  21. /* Navigation icon */
  22.  
  23. #navigation_menu span{
  24. color:{color:Navigation menu symbol};
  25. font-size:15px;
  26. }
  27.  
  28. #navigation_menu:hover span{
  29. color:{color:Navigation menu link hover};
  30. }
  31.  
  32. /* Navi box */
  33.  
  34. #navi{
  35. position:absolute;
  36. margin-top:0px;
  37. margin-left:-20px;
  38. padding:7px;
  39. padding-bottom:3px;
  40. width:40px;
  41. height:30px;
  42. font-size:15px;
  43. line-height:15px;
  44. background:{color:Navigation box background};
  45. z-index:1000;
  46. opacity:0;
  47. overflow:hidden;
  48. -webkit-transition: all 0.7s ease;
  49. -moz-transition: all 0.7s ease;
  50. -o-transition: all 0.7s ease;
  51. }
  52.  
  53. /* Navi box style when hovered. */
  54.  
  55. #navigation_menu:hover #navi{
  56. margin-left:-185px;
  57. width:155px;
  58. height:auto;
  59. overflow:visible;
  60. opacity:1;
  61. }
  62.  
  63. /* Navi link style */
  64.  
  65. #navi a{
  66. display:block;
  67. padding:5px;
  68. margin-bottom:5px;
  69. width:40px;
  70. height:auto;
  71. color:{color:Navigation menu link};
  72. background:{color:Navigation menu link background};
  73. font-size:12px;
  74. opacity:0.8;
  75. -webkit-transition: all 0.7s ease;
  76. -moz-transition: all 0.7s ease;
  77. -o-transition: all 0.7s ease;
  78. }
  79.  
  80. #navigation_menu:hover #navi a{
  81. width:145px;
  82. }
  83.  
  84. #navi a:hover{
  85. color:{color:Navigation menu link hover}!important;
  86. opacity:1;
  87. }
  88.  
  89. /* Navi triangle */
  90.  
  91. #navitr{
  92. position:absolute;
  93. display: inline-block;
  94. width:0;
  95. height:0;
  96. line-height:0;
  97. border:10px solid transparent;
  98. right:-25px;
  99. border-left:20px solid {color:Navigation box background};
  100. top:10px;
  101. }
  102.  
  103. /* Navigation menu ends */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement