Важная информация
Показано с 1 по 3 из 3

Тема: Горизонтальное выпадающее меню на HTML и CSS

  1. #1 Горизонтальное выпадающее меню на HTML и CSS 
    Модератор Аватар для pingvin
    Регистрация
    11.02.2011
    Сообщений
    389
    Сказал(а) спасибо
    80
    Поблагодарили 75 раз(а) в 48 сообщениях
    Недавно, я столкнулся с необходимостью выпадающего горизонтального меню. Написав его, решил поделиться своим рецептом со всеми. Интересно, что меню получилось с анимацией, а применялись только HTML и CSS.
    Любой разбирающийся в CSS человек может изменить оформление меню. Данная технология поддерживается всеми современными браузерами. Проблемы могут возникнуть в IE до 9-ой версии.
    Посмотреть демонстрацию: [Ссылки могут видеть только зарегистрированные пользователи. ]

    Прокомментированный код:

    1. Разметка HTML.
    HTML Code:
    1.  
    2. <[Ссылки могут видеть только зарегистрированные пользователи. ]>
    3. <[Ссылки могут видеть только зарегистрированные пользователи. ]>
    4. <[Ссылки могут видеть только зарегистрированные пользователи. ]>Выпадающее горизонтальное меню. Демо</[Ссылки могут видеть только зарегистрированные пользователи. ]>
    5.  
    6. <!-- Подключаем CSS-стили для меню -->
    7. <[Ссылки могут видеть только зарегистрированные пользователи. ] rel="stylesheet" href="style.css" type="text/css" />
    8. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    9. <[Ссылки могут видеть только зарегистрированные пользователи. ]>
    10. <!-- Блок-контейнер меню -->
    11. <[Ссылки могут видеть только зарегистрированные пользователи. ] id="menu_box">
    12. <!-- Кнопка меню -->
    13. <[Ссылки могут видеть только зарегистрированные пользователи. ] class="menu_button">
    14. Кнопка 1
    15. <!-- Блок-контейнер подменю -->
    16. <[Ссылки могут видеть только зарегистрированные пользователи. ] class="object lastmenu">
    17. <!-- Кнопка подменю -->
    18. <[Ссылки могут видеть только зарегистрированные пользователи. ] class="lastmenu_button">
    19. Кнопка 1.1
    20. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    21. <!-- Кнопка подменю -->
    22. <[Ссылки могут видеть только зарегистрированные пользователи. ] class="lastmenu_button">
    23. Кнопка 1.2
    24. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    25. <!-- Кнопка подменю -->
    26. <[Ссылки могут видеть только зарегистрированные пользователи. ] class="lastmenu_button">
    27. Кнопка 1.3
    28. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    29. <!-- Кнопка подменю -->
    30. <[Ссылки могут видеть только зарегистрированные пользователи. ] class="lastmenu_button">
    31. Кнопка 1.4
    32. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    33. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    34. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    35. <!-- Аналогично дальше -->
    36. <[Ссылки могут видеть только зарегистрированные пользователи. ] class="menu_button">
    37. Кнопка 2
    38. <[Ссылки могут видеть только зарегистрированные пользователи. ] class="object lastmenu">
    39. <[Ссылки могут видеть только зарегистрированные пользователи. ] class="lastmenu_button">
    40. Кнопка 2.1
    41. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    42. <[Ссылки могут видеть только зарегистрированные пользователи. ] class="lastmenu_button">
    43. Кнопка 2.2
    44. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    45. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    46. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    47.  
    48. <[Ссылки могут видеть только зарегистрированные пользователи. ] class="menu_button">
    49. Кнопка 3
    50. <!-- Эта кнопка без подменю -->
    51. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    52.  
    53. <[Ссылки могут видеть только зарегистрированные пользователи. ] class="menu_button">
    54. Кнопка 4
    55. <[Ссылки могут видеть только зарегистрированные пользователи. ] class="object lastmenu">
    56. <[Ссылки могут видеть только зарегистрированные пользователи. ] class="lastmenu_button">
    57. Спасибо за внимание!
    58. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    59. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    60. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    61. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    62. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    63. </[Ссылки могут видеть только зарегистрированные пользователи. ]>


    2. CSS-стили
    CSS Code:
    1.  
    2. body
    3. {
    4. margin: 20px;
    5. }
    6.  
    7. /* Блок-контейнер меню*/
    8. #menu_box
    9. {
    10. z-index: 0;
    11. position: relative;
    12.  
    13. top: auto;
    14. left: auto;
    15. right: auto;
    16. bottom: auto;
    17.  
    18. padding: auto;
    19. margin: auto;
    20. width: auto;
    21. height: auto;
    22.  
    23. font-family: arial;
    24. font-size: 16px;
    25. font-weight: 400;
    26. color: #373737;
    27. }
    28.  
    29. #menu_box .menu_button
    30. {
    31. z-index: 1;
    32. position: relative;
    33.  
    34. top: auto;
    35. left: auto;
    36. right: auto;
    37. bottom: auto;
    38.  
    39. padding: 10px 15px;
    40. margin: auto;
    41. width: auto;
    42. height: auto;
    43.  
    44. font-size: 16px;
    45.  
    46. border: none;
    47.  
    48. cursor: pointer;
    49. transition: 0.18s linear;
    50.  
    51. /* Гранидиент. Взято с <a href="http://www.colorzilla.com/gradient-editor/" target="_blank">http://www.colorzilla.com/gradient-editor/</a> */
    52. background: #e5e5e5; /* Old browsers */
    53. background: -moz-linear-gradient(top,  #e5e5e5 0%, #ffffff 50%, #efefef 51%, #f4f4f4 100%); /* FF3.6+ */
    54. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(50%,#ffffff), color-stop(51%,#efefef), color-stop(100%,#f4f4f4)); /* Chrome,Safari4+ */
    55. background: -webkit-linear-gradient(top,  #e5e5e5 0%,#ffffff 50%,#efefef 51%,#f4f4f4 100%); /* Chrome10+,Safari5.1+ */
    56. background: -o-linear-gradient(top,  #e5e5e5 0%,#ffffff 50%,#efefef 51%,#f4f4f4 100%); /* Opera 11.10+ */
    57. background: -ms-linear-gradient(top,  #e5e5e5 0%,#ffffff 50%,#efefef 51%,#f4f4f4 100%); /* IE10+ */
    58. background: linear-gradient(to bottom,  #e5e5e5 0%,#ffffff 50%,#efefef 51%,#f4f4f4 100%); /* W3C */
    59. filter: progid<img src="http://iforum.pro/images/smilies/biggrin.png" border="0" alt="" title="Big Grin" class="inlineimg" />XImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */
    60. }
    61.  
    62. #menu_box .menu_button:hover
    63. {        
    64. color: #FFFFFF;
    65.  
    66. /* Гранидиент. Взято с <a href="http://www.colorzilla.com/gradient-editor/" target="_blank">http://www.colorzilla.com/gradient-editor/</a> */
    67. background: #aebcbf; /* Old browsers */
    68. background: -moz-linear-gradient(top,  #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* FF3.6+ */
    69. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */
    70. background: -webkit-linear-gradient(top,  #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Chrome10+,Safari5.1+ */
    71. background: -o-linear-gradient(top,  #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Opera 11.10+ */
    72. background: -ms-linear-gradient(top,  #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* IE10+ */
    73. background: linear-gradient(to bottom,  #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* W3C */
    74. filter: progid<img src="http://iforum.pro/images/smilies/biggrin.png" border="0" alt="" title="Big Grin" class="inlineimg" />XImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); /* IE6-9 */
    75. }
    76.  
    77. .lastmenu
    78. {
    79. z-index: -1;
    80. position: absolute;
    81. visibility: hidden;
    82. opacity: 0;
    83.  
    84. top: 0px;
    85. left: 0%;
    86. right: auto;
    87. bottom: auto;
    88.  
    89. padding: auto;
    90. margin: auto;
    91. width: 200px;
    92. height: auto;    
    93.  
    94. /* Гранидиент. Взято с <a href="http://www.colorzilla.com/gradient-editor/" target="_blank">http://www.colorzilla.com/gradient-editor/</a> */
    95. background: #000000; /* Old browsers */
    96. background: -moz-linear-gradient(top,  #000000 0%, #45484d 100%); /* FF3.6+ */
    97. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#45484d)); /* Chrome,Safari4+ */
    98. background: -webkit-linear-gradient(top,  #000000 0%,#45484d 100%); /* Chrome10+,Safari5.1+ */
    99. background: -o-linear-gradient(top,  #000000 0%,#45484d 100%); /* Opera 11.10+ */
    100. background: -ms-linear-gradient(top,  #000000 0%,#45484d 100%); /* IE10+ */
    101. background: linear-gradient(to bottom,  #000000 0%,#45484d 100%); /* W3C */
    102. filter: progid<img src="http://iforum.pro/images/smilies/biggrin.png" border="0" alt="" title="Big Grin" class="inlineimg" />XImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#45484d',GradientType=0 ); /* IE6-9 */
    103. }
    104.  
    105. #menu_box .menu_button:hover .lastmenu
    106. {    
    107. visibility: visible;
    108. opacity: 1;
    109.  
    110. -moz-transform: translate(0, 35px); /* Для Firefox */
    111. -ms-transform: translate(0, 35px); /* Для IE */
    112. -webkit-transform: translate(0, 35px); /* Для Safari, Chrome, iOS */
    113. -o-transform: translate(0, 35px);
    114. transform: translate(0, 35px);
    115. }
    116.  
    117. #menu_box .menu_button .lastmenu .lastmenu_button
    118. {
    119. z-index: 2;
    120. position: relative;
    121. display: block;
    122.  
    123. top: 0px;
    124. left: 0px;
    125. right: 0px;
    126. bottom: 0px;
    127.  
    128. padding: 5px 10px;
    129. margin: 0px;
    130. width: auto;
    131. height: auto;
    132.  
    133. font-size: 15px;
    134. font-weight: 600;
    135. color: #FFFFFF;
    136. text-shadow: none;
    137.  
    138. border: none;
    139.  
    140. cursor: pointer;
    141. transition: 0.18s linear;
    142. }
    143. #menu_box .menu_button .lastmenu .lastmenu_button:hover
    144. {
    145. color: #000000;
    146.  
    147. /* Гранидиент. Взято с <a href="http://www.colorzilla.com/gradient-editor/" target="_blank">http://www.colorzilla.com/gradient-editor/</a> */
    148. background: #ffffff; /* Old browsers */
    149. background: -moz-linear-gradient(top,  #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6+ */
    150. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    151. background: -webkit-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    152. background: -o-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Opera 11.10+ */
    153. background: -ms-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* IE10+ */
    154. background: linear-gradient(to bottom,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C */
    155. filter: progid<img src="http://iforum.pro/images/smilies/biggrin.png" border="0" alt="" title="Big Grin" class="inlineimg" />XImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    156. }
    157.  
    158. /* Необходимо для анимации */
    159. .object {
    160.     position: absolute;
    161.     transition: all 0.3s ease-in-out;
    162.     -webkit-transition: all 0.3s ease-in-out; /** Chrome & Safari **/
    163.     -moz-transition: all 0.3s ease-in-out; /** Firefox **/
    164.     -o-transition: all 0.3s ease-in-out; /** Opera **/
    165. }


    Скачать исходники: [Ссылки могут видеть только зарегистрированные пользователи. ]
    На этом месте могло быть Ваше "Спасибо"
    Ответить с цитированием  
     

  2. Пользователь сказал cпасибо:

    >Quiet Snow< (17.07.2014)

  3. #2  
    Супер модератор Аватар для >Quiet Snow<
    Регистрация
    11.04.2011
    Адрес
    Планета земля
    Сообщений
    3,913
    Сказал(а) спасибо
    1,842
    Поблагодарили 977 раз(а) в 835 сообщениях
    Записей в блоге
    1
    опера 12.17, полёт нормальный
    Обучение прикладному программированию(по skype), качественно, недорого, 18+, вопросы в личку.
    «Если вы ничего не сделаете, я уверяю вас, ничего и не произойдёт» © Жак Фреско
    Ограниченно модерирую.
    Ответить с цитированием  
     

  4. #3  
    Профи Аватар для Dispetcher14
    Регистрация
    12.12.2010
    Адрес
    Раменское
    Сообщений
    597
    Сказал(а) спасибо
    35
    Поблагодарили 68 раз(а) в 56 сообщениях
    Записей в блоге
    13
    Firefox Current, аналогично.
    "Спокойно, Маша, я Дубровский" (с) Дубровский, "Дубровский".
    Ответить с цитированием  
     

Информация о теме
Пользователи, просматривающие эту тему

Эту тему просматривают: 1 (пользователей: 0 , гостей: 1)

Похожие темы

  1. Выпадающее меню с задержкой
    от Данила в разделе JavaScript
    Ответов: 0
    Последнее сообщение: 22.01.2014, 12:29
  2. меню xbox 360 на windows 7
    от Игорь11121 в разделе Операционные системы
    Ответов: 1
    Последнее сообщение: 30.12.2013, 00:40
  3. DVD меню
    от Kakos_nonos в разделе Софт
    Ответов: 2
    Последнее сообщение: 07.01.2013, 11:27
  4. Помогите с меню
    от Vladislav в разделе HTML, CSS
    Ответов: 8
    Последнее сообщение: 23.10.2012, 19:57
  5. Програма Меню
    от motoded в разделе QBasic
    Ответов: 11
    Последнее сообщение: 05.08.2011, 02:21
Ваши права
  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •