Guest User

Untitled

a guest
Apr 19th, 2018
92
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.00 KB | None | 0 0
  1. <div class="menuPrincipal">
  2. <div class="">
  3. <button class="dropbtn">Dropdown</button>
  4. <div class="menuContenido">
  5. <a href="#" class="separador"></a>
  6. <a href="#" class="separador"></a>
  7. <a href="#" class="separador"></a>
  8. <a href="#" class="linkMenuHome separador lang" key="linkHome">Laboratorio estratégico</a>
  9. <a href="#" class="linkMenuNeeds separador lang" key="linkNeeds">Descubrir necesidades</a>
  10. <a href="#" class="linkMenuStrategies separador lang" key="linkStrategies">Definir estrategias</a>
  11. <a href="#" class="linkMenuTools separador lang" key="linkTools">Herramientas</a>
  12. <a href="#" class="linkMenuExecution separador lang" key="linkExecution">Ejecución</a>
  13. <a href="#" class="linkMenuResults separador lang" key="linkResults">Resultados</a>
  14. <a href="#" class="linkMenuExplore separador lang" key="linkExplore">Explora resultados</a>
  15. <a href="#" class="linkMenuTeam separador lang" key="linkTeam">Equipo Seadog</a>
  16. <a href="#" class="linkMenuContact separador lang" key="linkContact">Contáctenos</a>
  17. </div>
  18. </div>
  19. </div>
  20.  
  21. <div class="circle" style="cursor: pointer;">
  22. <ul class="nav navbar-nav navbar-right">
  23. <li class="linkBrowserHome activado scroller">
  24. </li>
  25. <li class="linkBrowserNeeds desactivado scroller">
  26. </li>
  27. <li class="linkBrowserStrategies desactivado scroller">
  28. </li>
  29. <li class="linkBrowserTools desactivado scroller">
  30. </li>
  31. <li class="linkBrowserExecution desactivado scroller">
  32. </li>
  33. <li class="linkBrowserResults desactivado scroller">
  34. </li>
  35. </ul>
  36. </div>
  37.  
  38. .separador{
  39. margin-left: 500px;
  40. margin-right: 150px;
  41. margin-top: 5px;
  42. float: right;
  43. font-size: 25px;
  44. }
  45. .menuOpciones{
  46. cursor: pointer;
  47. height: 870px;
  48. width: 700px;
  49. opacity: 0.96;
  50. }
  51. .dropbtn {
  52. background-color: #4CAF50;
  53. color: white;
  54. padding: 16px;
  55. font-size: 16px;
  56. border: none;
  57. cursor: pointer;
  58. /*margin-left: 890px;*/
  59. margin-left: 600px;
  60. position: absolute;
  61. }
  62. .menuContenido {
  63. /*display: none;*/
  64. position: absolute;
  65. background-color: #E42090;
  66. min-width: 160px;
  67. /*box-shadow: -20px 1px 16px 0px rgba(0,0,0,0.2);*/
  68. z-index: 1;
  69. left: 50%;
  70. top: -100px;
  71. width: 960px;
  72. height: 923px;
  73. opacity: 0.96;
  74. }
  75. .menuContenido a {
  76. color: #f5BDD6;
  77. padding: 12px 16px;
  78. text-decoration: none;
  79. display: block;
  80. }
  81.  
  82. .menuPrincipal{
  83. position: absolute;
  84. left: 40%;
  85.  
  86. }
  87. .menuContenido a:hover {
  88. /*background-color: greenyellow*/
  89. color: #fffeff;
  90. text-decoration: none;
  91. }
  92.  
  93. .menuPrincipal:hover .menuContenido {
  94. display: block;
  95. }
  96. .menuPrincipal:hover .dropbtn {
  97. /*background-color: brown;*/
  98. }
  99.  
  100. .circle {
  101. background-color: transparent;
  102. position: fixed;
  103. top: 90%;
  104. right: 60%;
  105. z-index: 200;
  106. }
  107. .circle ul{
  108. list-style: none;
  109. cursor:pointer;
  110. cursor: hand;
  111. display: inline-block;
  112.  
  113. }
  114. .circle ul li {
  115. float: none;
  116. content: '';
  117. position: relative;
  118. float: left;
  119. width: 15px;
  120. height: 15px;
  121. border-radius: 15px;
  122. background-color: #FEFEFE;
  123. margin: 20px 30px;
  124. z-index: 10;
  125. border: solid 1px #B7B7B7;
  126. left: 50%;
  127. box-sizing: content-box;
  128. }
  129. .desactivado:hover {
  130. -webkit-transform:scale(1.3);transform:scale(1.3);
  131. }
  132.  
  133. .activado{
  134. box-shadow: 0 0 0em 13px #EA0B8C;
  135. }
Add Comment
Please, Sign In to add comment