Не могу найти чтото подобное(
yury,
instantcms.ru/addons/responsive-theme-for-instantcms2.html
И родитель
adminlte.io/themes/AdminLTE/index2.html
там выплывают ссылки, что конечно неплохо, но думал именно чтобы при наведении общий блок расширялся и показывал все ссылки. как то эстетичнее выглядит
Это еще проще. Повесить на ховер увеличение ширины блока и отображение надписей.там выплывают ссылки, что конечно неплохо, но думал именно чтобы при наведении общий блок расширялся и показывал все ссылки. как то эстетичнее выглядит
Но есть одна сложность. Остальные блоки сайта придется пропорционально расширению левого блока сплющить.
А "повесить" это что сделать?Повесить на ховер
А для чего?Остальные блоки сайта придется пропорционально расширению левого блока сплющить.
))
Это есть в шаблоне, включается/выключается в админкеЭто еще проще. Повесить на ховер увеличение ширины блока и отображение надписей.
А "повесить" это что сделать?
$( ".left" ).hover( function() {
Чтобы не загораживали страницу. Если yury все равно — можно не плющить.А для чего?
Ясно, спасибо!
А "повесить" это что сделать?
$( ".left" ).hover( function() {Чтобы не загораживали страницу. Если yury все равно — можно не плющить.А для чего?
Это Вам спасибо за гениальную мысль "ничего не плющить". Навел мышь, посмотрел, убрал все опять видно.Ясно, спасибо!
Мне тоже боковую менюшку хотелось бы…
чуток доработать решил, т.к там только при клике появляется, а не при наведении, еще плюс к тому же, появляетются блоки на другом уровне. Решил, что можно наверняка вывести в дивах ссылки и просто прятать их, а при наведении расширять блок и показывать ссылки. Но чтото не показываются ссылки рядом с иконками. И когда убираю мыш с блока, то он не прячется.
.menu,.menu-bar { position: fixed; left: 0; height: 100%; list-style-type: none; margin: 0; padding: 0; background: rgb(48, 64, 132); z-index: 10; overflow: hidden; box-shadow: 2px 0 18px rgba(0,0,0,0.26); } .menuhover { width: 250px !important; } .menu .gh-ns-link { position: relative; white-space: nowrap; -o-transition: background .2s; transition: background .2s; transform: translate3d(0, 0, 0); } .menu .gh-ns-label { box-sizing: border-box; /* display: inline-block; */ vertical-align: middle; /* position: absolute; */ /* white-space: normal; */ width: 250px; z-index: 500000; padding: 0 0 0 95px; text-transform: uppercase; /* font-family: 'fregat-bold', sans-serif; */ font-weight: normal; /* font-size: 1.3rem; */ /* color: #ffffff; */ /* line-height: 1.5rem; */ opacity: 70; /* display: inline-block; */ -ms-transform: translateX(10px); -o-transform: translateX(10px); /* transform: translateX(10px); */ -o-transition: opacity .3s, visibility .3s, -o-transform .3s; /* transition: transform .3s, opacity .3s, visibility .3s; */ /* transition: transform .3s, opacity .3s, visibility .3s, -o-transform .3s; */ } .menu li a { display: block; text-indent: -500em; height: 5em; width: 5em; line-height: 5em; text-align: center; color: #fff; position: relative; border-bottom: 1px solid rgba(0,0,0,0.05); transition: background .1s ease-in-out; } .menu li a:before { font-family: FontAwesome; speak: none; text-indent: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 1.4em; } .menu li a.search:before { content: "\f002"; } .menu li a.archive:before { content: "\f187"; } .menu li a.pencil:before { content: "\f040"; } .menu li a.contact:before { content: "\f003"; } .menu li a.about:before { content: "\f007"; } .menu li a.home:before { content: "\f039"; } .menu-bar li a:hover,.menu li a:hover,.menu li:first-child a { background: #4e136b; color: #fff; } .menu-bar { overflow: hidden; left: 5em; z-index: 50; width: 0; height: 0; transition: all .1s ease-in-out; } .menu-bar li a { display: block; height: 4em; line-height: 4em; text-align: center; color: #72739f; text-decoration: none; position: relative; font-family: verdana; border-bottom: 1px solid rgba(0,0,0,0.05); transition: background .1s ease-in-out; } .menu-bar li:first-child a { height: 5em; background: #4d126a; color: #fff; line-height: 5; } .para { color: #033f72; padding-left: 100px; font-size: 3em; margin-bottom: 20px; } .open { width: 10em; height: 100%; } @media all and (max-width: 500px) { .container { margin-top: 100px; } .menu { height: 5em; width: 100%; } .menu li { display: inline-block; float: left; } .menu-bar li a { width: 100%; } .menu-bar { width: 100%; left: 0; height: 0; } .open { width: 100%; height: auto; } .para { padding-left: 5px; } } @media screen and (max-height: 34em) { .menu li,.menu-bar { font-size: 70%; } } @media screen and (max-height: 34em) and (max-width: 500px) { .menu { height: 3.5em; } }
<ul class="menu"> <li><a href="#" class="menu-button home" onclick="$('.menu-bar').toggleClass('open');">меню</a></li> <li><a class="pencil gh-ns-link" href="/about/"> <div class="gh-ns-label"> О Компании </div
Нашел неплохой скрипт меню 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/
чуток доработать решил, т.к там только при клике появляется, а не при наведении, еще плюс к тому же, появляетются блоки на другом уровне. Решил, что можно наверняка вывести в дивах ссылки и просто прятать их, а при наведении расширять блок и показывать ссылки. Но чтото не показываются ссылки рядом с иконками. И когда убираю мыш с блока, то он не прячется.
.menu,.menu-bar { position: fixed; left: 0; height: 100%; list-style-type: none; margin: 0; padding: 0; background: rgb(48, 64, 132); z-index: 10; overflow: hidden; box-shadow: 2px 0 18px rgba(0,0,0,0.26); } .menuhover { width: 250px !important; } .menu .gh-ns-link { position: relative; white-space: nowrap; -o-transition: background .2s; transition: background .2s; transform: translate3d(0, 0, 0); } .menu .gh-ns-label { box-sizing: border-box; /* display: inline-block; */ vertical-align: middle; /* position: absolute; */ /* white-space: normal; */ width: 250px; z-index: 500000; padding: 0 0 0 95px; text-transform: uppercase; /* font-family: 'fregat-bold', sans-serif; */ font-weight: normal; /* font-size: 1.3rem; */ /* color: #ffffff; */ /* line-height: 1.5rem; */ opacity: 70; /* display: inline-block; */ -ms-transform: translateX(10px); -o-transform: translateX(10px); /* transform: translateX(10px); */ -o-transition: opacity .3s, visibility .3s, -o-transform .3s; /* transition: transform .3s, opacity .3s, visibility .3s; */ /* transition: transform .3s, opacity .3s, visibility .3s, -o-transform .3s; */ } .menu li a { display: block; text-indent: -500em; height: 5em; width: 5em; line-height: 5em; text-align: center; color: #fff; position: relative; border-bottom: 1px solid rgba(0,0,0,0.05); transition: background .1s ease-in-out; } .menu li a:before { font-family: FontAwesome; speak: none; text-indent: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 1.4em; } .menu li a.search:before { content: "\f002"; } .menu li a.archive:before { content: "\f187"; } .menu li a.pencil:before { content: "\f040"; } .menu li a.contact:before { content: "\f003"; } .menu li a.about:before { content: "\f007"; } .menu li a.home:before { content: "\f039"; } .menu-bar li a:hover,.menu li a:hover,.menu li:first-child a { background: #4e136b; color: #fff; } .menu-bar { overflow: hidden; left: 5em; z-index: 50; width: 0; height: 0; transition: all .1s ease-in-out; } .menu-bar li a { display: block; height: 4em; line-height: 4em; text-align: center; color: #72739f; text-decoration: none; position: relative; font-family: verdana; border-bottom: 1px solid rgba(0,0,0,0.05); transition: background .1s ease-in-out; } .menu-bar li:first-child a { height: 5em; background: #4d126a; color: #fff; line-height: 5; } .para { color: #033f72; padding-left: 100px; font-size: 3em; margin-bottom: 20px; } .open { width: 10em; height: 100%; } @media all and (max-width: 500px) { .container { margin-top: 100px; } .menu { height: 5em; width: 100%; } .menu li { display: inline-block; float: left; } .menu-bar li a { width: 100%; } .menu-bar { width: 100%; left: 0; height: 0; } .open { width: 100%; height: auto; } .para { padding-left: 5px; } } @media screen and (max-height: 34em) { .menu li,.menu-bar { font-size: 70%; } } @media screen and (max-height: 34em) and (max-width: 500px) { .menu { height: 3.5em; } }
меню О Компании О Компании О Компании