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

InstantCMS 2.X
#1 31 января 2018 в 20:46
Подскажите скрипт по типу как у макфа www.makfa.ru/ — можно чуть проще — слева фиксируется по всей высоте полоса, на ней размещены иконки. при наведении на меню оно разворачивается как у макфы и показываются названия ссылок.

Не могу найти чтото подобное(
#3 31 января 2018 в 21:22


yury,
instantcms.ru/addons/responsive-theme-for-instantcms2.html
И родитель
adminlte.io/themes/AdminLTE/index2.html

Ris

там выплывают ссылки, что конечно неплохо, но думал именно чтобы при наведении общий блок расширялся и показывал все ссылки. как то эстетичнее выглядит
#4 31 января 2018 в 21:30

там выплывают ссылки, что конечно неплохо, но думал именно чтобы при наведении общий блок расширялся и показывал все ссылки. как то эстетичнее выглядит

yury
Это еще проще. Повесить на ховер увеличение ширины блока и отображение надписей.
Но есть одна сложность. Остальные блоки сайта придется пропорционально расширению левого блока сплющить.
#5 31 января 2018 в 21:39

Повесить на ховер

Ris
А "повесить" это что сделать?

Остальные блоки сайта придется пропорционально расширению левого блока сплющить.

Ris
А для чего?
))
#6 31 января 2018 в 21:45

Это еще проще. Повесить на ховер увеличение ширины блока и отображение надписей.

Ris
Это есть в шаблоне, включается/выключается в админке
#7 31 января 2018 в 21:47

А "повесить" это что сделать?

Олег Васильевич я
  1. $( ".left" ).hover(
  2. function() {

А для чего?

Олег Васильевич я
Чтобы не загораживали страницу. Если yury все равно — можно не плющить.
#8 31 января 2018 в 21:53


А "повесить" это что сделать?

Олег Васильевич я
  1. $( ".left" ).hover(
  2. function() {

А для чего?

Олег Васильевич я
Чтобы не загораживали страницу. Если yury все равно — можно не плющить.

Ris
Ясно, спасибо!
#9 31 января 2018 в 21:59

Ясно, спасибо!

Олег Васильевич я
Это Вам спасибо за гениальную мысль "ничего не плющить". Навел мышь, посмотрел, убрал все опять видно.
Мне тоже боковую менюшку хотелось бы…
#10 1 февраля 2018 в 08:37
Нашел неплохой скрипт меню 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/

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

  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. }
  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
#11 1 февраля 2018 в 09:20


Нашел неплохой скрипт меню 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/

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

  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. }
  1.  
  2.  
  3. меню
  4.  
  5.  
  6. О Компании
  7.  
  8.  
  9.  
  10. О Компании
  11.  
  12.  
  13.  
  14. О Компании
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.