парения эффект на меню навигации - пограничный вопрос

мне нужно создать меню такой же, как это изображение enter image description here парения эффект на меню навигации - пограничный вопрос

Моя проблема заключается в состояние парения, где мне нужно изменить вертикальное изображение с обеих сторон. До сих пор я дошел до этого момента: http://jsfiddle.net/cgEab/

Как я могу изменить как левое, так и правое изображение в режиме зависания?

Код для КСС

#topmenu{ 
    float: right; 
    position: relative;  
} 
ul#topnav { 
    right: 0px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    font-size: 1em;  
    background-color: #ccc; 
} 
ul#topnav li { 
    float: left; 
    margin: 0; padding: 0; 
} 
ul#topnav li a { 
    padding: 10px 22px; 
    display: block; 
    color: #777777; 
    text-decoration: none; 
    background-image: url('http://s11.postimg.org/az4oag1in/menu_bar_vertical.jpg'); 
    background-position: right; 
    background-repeat: no-repeat; 
    display: block; 
} 
ul#topnav li a.lastitem { 
    background-image:none;  
} 
ul#topnav li a:hover { 
    color: red; 
    background-image: url('http://s11.postimg.org/xch0azru7/menu_bar_vertical_hover.jpg');  
}

и HTML

<link href='http://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'> 
<div id="topmenu"> 
<ul id="topnav"> 
    <li><a href="#">HOME</a></li> 
    <li><a href="#">SERVICES</a></li> 
    <li><a href="#">CUSTOMERS</a></li> 
    <li><a href="#">ABOUT US</a></li> 
    <li><a class="lastitem" href="#">CONTACT</a></li> 
</ul>

источник

2013-07-26 Stathis

С какими вертикальными изображениями вы говорите? Ex при зависании сервисов вы хотите, чтобы дом и клиент тоже менялись ??? – AnaMaria

Я изменил границы изображения в два раза с обеих сторон и вычитается запас для коррекции положения.

http://jsfiddle.net/Q3pQx/

ul#topnav li a { 
    margin-left:-2px; <-- FIX 
    padding: 10px 22px; 
    display: block; 
    color: #777777; 
    text-decoration: none; 
    background-image: url('http://s11.postimg.org/az4oag1in/menu_bar_vertical.jpg'); 
    background-position: right; 
    background-repeat: no-repeat; 
    display: block; /* make the link background clickable */ 
} 

ul#topnav li a:hover { 
    color: red; 
    background: url('http://s11.postimg.org/xch0azru7/menu_bar_vertical_hover.jpg'), url('http://s11.postimg.org/xch0azru7/menu_bar_vertical_hover.jpg'); <-- FIX 
    background-position: left top, right top; <-- FIX 
    background-repeat: no-repeat, no-repeat; <-- FIX 
}

ред скрипку сделал некоторую тонкую настройку http://jsfiddle.net/LhFkf/

источник

2013-07-26 07:50:28

Точно о чем я говорил. Я не имел в виду эту функцию с двойным изображением, спасибо! – Stathis

может я уверен попробовать этот

http://jsfiddle.net/cgEab/7/

CSS

#topmenu{ 
    float: right; 
    position: relative;  
} 
ul#topnav { 
    /* position: absolute;*/  
    right: 0px; 
    margin: 0; 
    padding: 0; 
    /*width: 640px;*/ 
    list-style: none; 
    font-size: 1em;  
    background-color: #ccc; 

} 
ul#topnav li { 
    float: left; 
    margin: 0; padding: 0; 
    /*border-right: 1px solid #555;*/ 
} 
ul#topnav li a { 
    padding: 10px 22px; 
    display: block; 
    margin-left:-2px; 
    color: #777777; 
    text-decoration: none; 
    background-image: url('http://s11.postimg.org/az4oag1in/menu_bar_vertical.jpg'); 
    background-position: right; 
    background-repeat: no-repeat; 
    display: block; /* make the link background clickable */ 
} 
ul#topnav li a.lastitem { 
    background-image:none;  
} 
ul#topnav li a:hover { 
    color: red; 


    background: url('http://s11.postimg.org/xch0azru7/menu_bar_vertical_hover.jpg'), url('http://s11.postimg.org/xch0azru7/menu_bar_vertical_hover.jpg'); 
background-position: left top, right top; 
background-repeat: no-repeat, no-repeat; 


    }

источник

2013-07-26 07:45:01 falguni

Даже я пробовал то же самое, но если вы видите, оставил один промахи, чтобы накладываться, что плохо выглядит, он может использовать технику раздвижных дверей здесь –

Я поместил изображение в li, прежде чем он был на li a.
Это взломанный css3. Я надеюсь, что вы не должны использовать IE ниже 8.

#topmenu{ 
    float: right; 
    position: relative;  
} 
ul#topnav { 
    /* position: absolute;*/  
    right: 0px; 
    margin: 0; 
    padding: 0; 
    /*width: 640px;*/ 
    list-style: none; 
    font-size: 1em;  
    background-color: #ccc; 

} 
ul#topnav li { 
    float: left; 
    margin: 0; padding: 0; 
    background-image: url('http://s11.postimg.org/az4oag1in/menu_bar_vertical.jpg'); 
    background-position: left; 
    background-repeat: no-repeat; 
} 

ul#topnav li:hover, 
ul#topnav li:hover + li { 
    background-image: url('http://s11.postimg.org/xch0azru7/menu_bar_vertical_hover.jpg') 
    /*border-right: 1px solid #555;*/ 
} 
ul#topnav li a { 
    padding: 10px 22px; 
    display: block; 
    color: #777777; 
    text-decoration: none; 
    /*background-image: url('http://s11.postimg.org/az4oag1in/menu_bar_vertical.jpg'); 
    background-position: left; 
    background-repeat: no-repeat;*/ 
    display: block; /* make the link background clickable */ 
} 
ul#topnav li:first-child { 
    background-image:none;  
} 
ul#topnav li a:hover{ 
    color: red; 
}

Fiddle

источник

2013-07-26 07:48:13

'Фоновое изображение' может занять более одного изображения. Поэтому вы можете попробовать что-то вроде этого:

background-image: url (...), url (...);

background-position: left, right;

источник

2013-07-26 07:54:17

парения эффект на меню навигации - пограничный вопрос

ответ

Смежные вопросы