Подскажите скрипт меню по типу как у Макфа 2.X

 
Посетитель
no avatar
МедальАвторитет форума
Сообщений: 2795
Подскажите скрипт по типу как у макфа http://www.makfa.ru/ - можно чуть проще - слева фиксируется по всей высоте полоса, на ней размещены иконки. при наведении на меню оно разворачивается как у макфы и показываются названия ссылок.

Не могу найти чтото подобное(
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2711
yury,
http://addons.instantcms.ru/addons/responsive-theme-for-instantcms2.html
И родитель
https://adminlte.io/themes/AdminLTE/index2.html
Реклама
cms
Посетитель
no avatar
МедальАвторитет форума
Сообщений: 2795

там выплывают ссылки, что конечно неплохо, но думал именно чтобы при наведении общий блок расширялся и показывал все ссылки. как то эстетичнее выглядит
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2711
yury:
там выплывают ссылки, что конечно неплохо, но думал именно чтобы при наведении общий блок расширялся и показывал все ссылки. как то эстетичнее выглядит
Это еще проще. Повесить на ховер увеличение ширины блока и отображение надписей.
Но есть одна сложность. Остальные блоки сайта придется пропорционально расширению левого блока сплющить.
Посетитель
small user social cms
МедальПочетный донор проектаКубок зрительских симпатийАвторитет форумаПочетный донор проекта
Сообщений: 2815
Ris:
Повесить на ховер
А "повесить" это что сделать?
Ris:
Остальные блоки сайта придется пропорционально расширению левого блока сплющить.
А для чего?
))
Украинский для инстант
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1168
Ris:
Это еще проще. Повесить на ховер увеличение ширины блока и отображение надписей.
Это есть в шаблоне, включается/выключается в админке
Дополнения для InstantCMS 2 | Готовый сайт Доска объявлений
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2711
Олег Васильевич я:
А "повесить" это что сделать?
Код JAVASCRIPT:
  1. $( ".left" ).hover(
  2. function() {
Олег Васильевич я:
А для чего?
Чтобы не загораживали страницу. Если yury все равно - можно не плющить.
Посетитель
small user social cms
МедальПочетный донор проектаКубок зрительских симпатийАвторитет форумаПочетный донор проекта
Сообщений: 2815
Ris:

Олег Васильевич я:
А "повесить" это что сделать?
Код JAVASCRIPT:
  1. $( ".left" ).hover(
  2. function() {
Олег Васильевич я:
А для чего?
Чтобы не загораживали страницу. Если yury все равно - можно не плющить.
Ясно, спасибо!
Украинский для инстант
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2711
Олег Васильевич я:
Ясно, спасибо!
Это Вам спасибо за гениальную мысль "ничего не плющить". Навел мышь, посмотрел, убрал все опять видно.
Мне тоже боковую менюшку хотелось бы...
Посетитель
no avatar
МедальАвторитет форума
Сообщений: 2795
Нашел неплохой скрипт меню http://imapo.ru/%D0%BF%D0%BB%D0%B0%D0%B2%D0%B0%D1%8E%D1%89%D0%B5%D0%B5-%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D0%B5-%D0%BC%D0%B5%D0%BD%D1%8E/

чуток доработать решил, т.к там только при клике появляется, а не при наведении, еще плюс к тому же, появляетются блоки на другом уровне. Решил, что можно наверняка вывести в дивах ссылки и просто прятать их, а при наведении расширять блок и показывать ссылки. Но чтото не показываются ссылки рядом с иконками. И когда убираю мыш с блока, то он не прячется.

Код CSS:
  1. .menu,.menu-bar {
  2. position: fixed;
  3. left: 0;
  4. height: 100%;
  5. list-style-type: none;
  6. margin: 0;
  7. padding: 0;
  8. background: rgb(48, 64, 132);
  9. z-index: 10;
  10. overflow: hidden;
  11. box-shadow: 2px 0 18px rgba(0,0,0,0.26);
  12. }
  13.  
  14. .menuhover {
  15. width: 250px !important;
  16. }
  17.  
  18. .menu .gh-ns-link {
  19. position: relative;
  20. white-space: nowrap;
  21. -o-transition: background .2s;
  22. transition: background .2s;
  23. transform: translate3d(0, 0, 0);
  24. }
  25.  
  26. .menu .gh-ns-label {
  27. box-sizing: border-box;
  28. /* display: inline-block; */
  29. vertical-align: middle;
  30. /* position: absolute; */
  31. /* white-space: normal; */
  32. width: 250px;
  33. z-index: 500000;
  34. padding: 0 0 0 95px;
  35. text-transform: uppercase;
  36. /* font-family: 'fregat-bold', sans-serif; */
  37. font-weight: normal;
  38. /* font-size: 1.3rem; */
  39. /* color: #ffffff; */
  40. /* line-height: 1.5rem; */
  41. opacity: 70;
  42. /* display: inline-block; */
  43. -ms-transform: translateX(10px);
  44. -o-transform: translateX(10px);
  45. /* transform: translateX(10px); */
  46. -o-transition: opacity .3s, visibility .3s, -o-transform .3s;
  47. /* transition: transform .3s, opacity .3s, visibility .3s; */
  48. /* transition: transform .3s, opacity .3s, visibility .3s, -o-transform .3s; */
  49. }
  50.  
  51.  
  52.  
  53. .menu li a {
  54. display: block;
  55. text-indent: -500em;
  56. height: 5em;
  57. width: 5em;
  58. line-height: 5em;
  59. text-align: center;
  60. color: #fff;
  61. position: relative;
  62. border-bottom: 1px solid rgba(0,0,0,0.05);
  63. transition: background .1s ease-in-out;
  64. }
  65.  
  66. .menu li a:before {
  67. font-family: FontAwesome;
  68. speak: none;
  69. text-indent: 0;
  70. position: absolute;
  71. top: 0;
  72. left: 0;
  73. width: 100%;
  74. height: 100%;
  75. font-size: 1.4em;
  76. }
  77.  
  78. .menu li a.search:before {
  79. content: "\f002";
  80. }
  81.  
  82. .menu li a.archive:before {
  83. content: "\f187";
  84. }
  85.  
  86. .menu li a.pencil:before {
  87. content: "\f040";
  88. }
  89.  
  90. .menu li a.contact:before {
  91. content: "\f003";
  92. }
  93.  
  94. .menu li a.about:before {
  95. content: "\f007";
  96. }
  97.  
  98. .menu li a.home:before {
  99. content: "\f039";
  100. }
  101.  
  102. .menu-bar li a:hover,.menu li a:hover,.menu li:first-child a {
  103. background: #4e136b;
  104. color: #fff;
  105. }
  106.  
  107. .menu-bar {
  108. overflow: hidden;
  109. left: 5em;
  110. z-index: 50;
  111. width: 0;
  112. height: 0;
  113. transition: all .1s ease-in-out;
  114. }
  115.  
  116. .menu-bar li a {
  117. display: block;
  118. height: 4em;
  119. line-height: 4em;
  120. text-align: center;
  121. color: #72739f;
  122. text-decoration: none;
  123. position: relative;
  124. font-family: verdana;
  125. border-bottom: 1px solid rgba(0,0,0,0.05);
  126. transition: background .1s ease-in-out;
  127. }
  128.  
  129. .menu-bar li:first-child a {
  130. height: 5em;
  131. background: #4d126a;
  132. color: #fff;
  133. line-height: 5;
  134. }
  135.  
  136. .para {
  137. color: #033f72;
  138. padding-left: 100px;
  139. font-size: 3em;
  140. margin-bottom: 20px;
  141. }
  142.  
  143. .open {
  144. width: 10em;
  145. height: 100%;
  146. }
  147.  
  148. @media all and (max-width: 500px) {
  149. .container {
  150. margin-top: 100px;
  151. }
  152.  
  153. .menu {
  154. height: 5em;
  155. width: 100%;
  156. }
  157.  
  158. .menu li {
  159. display: inline-block;
  160. float: left;
  161. }
  162.  
  163. .menu-bar li a {
  164. width: 100%;
  165. }
  166.  
  167. .menu-bar {
  168. width: 100%;
  169. left: 0;
  170. height: 0;
  171. }
  172.  
  173. .open {
  174. width: 100%;
  175. height: auto;
  176. }
  177.  
  178. .para {
  179. padding-left: 5px;
  180. }
  181. }
  182.  
  183. @media screen and (max-height: 34em) {
  184. .menu li,.menu-bar {
  185. font-size: 70%;
  186. }
  187. }
  188.  
  189. @media screen and (max-height: 34em) and (max-width: 500px) {
  190. .menu {
  191. height: 3.5em;
  192. }
  193. }
Код PHP:
  1.  
  2. <ul class="menu">
  3. <li><a href="#" class="menu-button home" onclick="$('.menu-bar').toggleClass('open');">меню</a></li>
  4. <li><a class="pencil gh-ns-link" href="/about/">
  5. <div class="gh-ns-label">
  6. О Компании </div>
  7. </a></li>
  8. <li><a class="pencil gh-ns-link" href="/about/">
  9. <div class="gh-ns-label">
  10. О Компании </div>
  11. </a></li>
  12. <li><a class="pencil gh-ns-link" href="/about/">
  13. <div class="gh-ns-label">
  14. О Компании </div>
  15. </a></li>
  16. <li><a class="pencil gh-ns-link" href="/about/">
  17. <div class="gh-ns-label">
  18. О Компании </div>
  19. </a></li>
  20. <li><a class="pencil gh-ns-link" href="/about/">
  21. <div class="gh-ns-label">
  22. О Компании </div>
  23. </a></li>
  24. </ul>
  25.  
  26. <ul class="menu-bar">
  27. <li><a href="#" class="menu-button">Меню</a></li>
  28. <li><a href="#">На главную</a></li>
  29. <li><a href="#">Профиль</a></li>
  30. <li><a href="#">Статьи</a></li>
  31. <li><a href="#">О нас</a></li>
  32. </ul>
  33.  
  34. <script>
  35. $(".menu-button").click(function(){
  36. $(".menu-bar").toggleClass( "open" );
  37. });
  38. $(".menu").hover(function(){
  39. $(".menu:hover").toggleClass( "menuhover" );
  40. });
  41. </script>
  42.  
при этом видно, что в блоке есть информация

Подскажите скрипт меню по типу как у Макфа
Редактировалось: 1 раз (Последний: 1 февраля 2018 в 08:38)
Посетитель
small user social cms
Медаль
Сообщений: 229
yury:

Нашел неплохой скрипт меню http://imapo.ru/%D0%BF%D0%BB%D0%B0%D0%B2%D0%B0%D1%8E%D1%89%D0%B5%D0%B5-%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D0%B5-%D0%BC%D0%B5%D0%BD%D1%8E/

чуток доработать решил, т.к там только при клике появляется, а не при наведении, еще плюс к тому же, появляетются блоки на другом уровне. Решил, что можно наверняка вывести в дивах ссылки и просто прятать их, а при наведении расширять блок и показывать ссылки. Но чтото не показываются ссылки рядом с иконками. И когда убираю мыш с блока, то он не прячется.

Код CSS:
  1. .menu,.menu-bar {
  2. position: fixed;
  3. left: 0;
  4. height: 100%;
  5. list-style-type: none;
  6. margin: 0;
  7. padding: 0;
  8. background: rgb(48, 64, 132);
  9. z-index: 10;
  10. overflow: hidden;
  11. box-shadow: 2px 0 18px rgba(0,0,0,0.26);
  12. }
  13.  
  14. .menuhover {
  15. width: 250px !important;
  16. }
  17.  
  18. .menu .gh-ns-link {
  19. position: relative;
  20. white-space: nowrap;
  21. -o-transition: background .2s;
  22. transition: background .2s;
  23. transform: translate3d(0, 0, 0);
  24. }
  25.  
  26. .menu .gh-ns-label {
  27. box-sizing: border-box;
  28. /* display: inline-block; */
  29. vertical-align: middle;
  30. /* position: absolute; */
  31. /* white-space: normal; */
  32. width: 250px;
  33. z-index: 500000;
  34. padding: 0 0 0 95px;
  35. text-transform: uppercase;
  36. /* font-family: 'fregat-bold', sans-serif; */
  37. font-weight: normal;
  38. /* font-size: 1.3rem; */
  39. /* color: #ffffff; */
  40. /* line-height: 1.5rem; */
  41. opacity: 70;
  42. /* display: inline-block; */
  43. -ms-transform: translateX(10px);
  44. -o-transform: translateX(10px);
  45. /* transform: translateX(10px); */
  46. -o-transition: opacity .3s, visibility .3s, -o-transform .3s;
  47. /* transition: transform .3s, opacity .3s, visibility .3s; */
  48. /* transition: transform .3s, opacity .3s, visibility .3s, -o-transform .3s; */
  49. }
  50.  
  51.  
  52.  
  53. .menu li a {
  54. display: block;
  55. text-indent: -500em;
  56. height: 5em;
  57. width: 5em;
  58. line-height: 5em;
  59. text-align: center;
  60. color: #fff;
  61. position: relative;
  62. border-bottom: 1px solid rgba(0,0,0,0.05);
  63. transition: background .1s ease-in-out;
  64. }
  65.  
  66. .menu li a:before {
  67. font-family: FontAwesome;
  68. speak: none;
  69. text-indent: 0;
  70. position: absolute;
  71. top: 0;
  72. left: 0;
  73. width: 100%;
  74. height: 100%;
  75. font-size: 1.4em;
  76. }
  77.  
  78. .menu li a.search:before {
  79. content: "\f002";
  80. }
  81.  
  82. .menu li a.archive:before {
  83. content: "\f187";
  84. }
  85.  
  86. .menu li a.pencil:before {
  87. content: "\f040";
  88. }
  89.  
  90. .menu li a.contact:before {
  91. content: "\f003";
  92. }
  93.  
  94. .menu li a.about:before {
  95. content: "\f007";
  96. }
  97.  
  98. .menu li a.home:before {
  99. content: "\f039";
  100. }
  101.  
  102. .menu-bar li a:hover,.menu li a:hover,.menu li:first-child a {
  103. background: #4e136b;
  104. color: #fff;
  105. }
  106.  
  107. .menu-bar {
  108. overflow: hidden;
  109. left: 5em;
  110. z-index: 50;
  111. width: 0;
  112. height: 0;
  113. transition: all .1s ease-in-out;
  114. }
  115.  
  116. .menu-bar li a {
  117. display: block;
  118. height: 4em;
  119. line-height: 4em;
  120. text-align: center;
  121. color: #72739f;
  122. text-decoration: none;
  123. position: relative;
  124. font-family: verdana;
  125. border-bottom: 1px solid rgba(0,0,0,0.05);
  126. transition: background .1s ease-in-out;
  127. }
  128.  
  129. .menu-bar li:first-child a {
  130. height: 5em;
  131. background: #4d126a;
  132. color: #fff;
  133. line-height: 5;
  134. }
  135.  
  136. .para {
  137. color: #033f72;
  138. padding-left: 100px;
  139. font-size: 3em;
  140. margin-bottom: 20px;
  141. }
  142.  
  143. .open {
  144. width: 10em;
  145. height: 100%;
  146. }
  147.  
  148. @media all and (max-width: 500px) {
  149. .container {
  150. margin-top: 100px;
  151. }
  152.  
  153. .menu {
  154. height: 5em;
  155. width: 100%;
  156. }
  157.  
  158. .menu li {
  159. display: inline-block;
  160. float: left;
  161. }
  162.  
  163. .menu-bar li a {
  164. width: 100%;
  165. }
  166.  
  167. .menu-bar {
  168. width: 100%;
  169. left: 0;
  170. height: 0;
  171. }
  172.  
  173. .open {
  174. width: 100%;
  175. height: auto;
  176. }
  177.  
  178. .para {
  179. padding-left: 5px;
  180. }
  181. }
  182.  
  183. @media screen and (max-height: 34em) {
  184. .menu li,.menu-bar {
  185. font-size: 70%;
  186. }
  187. }
  188.  
  189. @media screen and (max-height: 34em) and (max-width: 500px) {
  190. .menu {
  191. height: 3.5em;
  192. }
  193. }
Код PHP:
  1.  
  2.  
  3. меню
  4.  
  5.  
  6. О Компании
  7.  
  8.  
  9.  
  10. О Компании
  11.  
  12.  
  13.  
  14. О Компании
  15.  
  16.  
  17.  
  18. О Компании
  19.  
  20.  
  21.  
  22. О Компании
  23.  
  24.  
  25.  
  26.  
  27. Меню
  28. На главную
  29. Профиль
  30. Статьи
  31. О нас
  32.  
  33.  
  34.  
  35. $(".menu-button").click(function(){
  36. $(".menu-bar").toggleClass( "open" );
  37. });
  38. $(".menu").hover(function(){
  39. $(".menu:hover").toggleClass( "menuhover" );
  40. });
  41.  
  42.  
при этом видно, что в блоке есть информация

Подскажите скрипт меню по типу как у Макфа


Перешел по вашей ссылке, а там 404!
Александр Витальевич
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.