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

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

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

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

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

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

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

$( ".left" ).hover(
  function() {

А для чего?

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

$( ".left" ).hover(
  function() {

А для чего?

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

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

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

 
 
меню
 
 
                    О Компании                
 
 
 
                    О Компании                
 
 
 
                    О Компании                
                    

Александр Витальевич

0