пункт меню закругленный угол в CSS без CSS3! - PullRequest
Новая
       0

пункт меню закругленный угол в CSS без CSS3!

2 голосов
/ 28 февраля 2011

Я пытаюсь получить следующий вывод:

normal view

after hover this will show

Я хочу добиться этого с помощью HTML и CSS.Я не хочу использовать CSS3 (так как мой клиент не хочет, чтобы я!).Я пытаюсь следующий код:

HTML: 

<div class="menu">
    <ul>
        <li><a href="">registration</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Sch's direc</a></li>
        <li><a href="">faculty &amp; staff</a></li>
        <li><a href="">Campuses</a></li>
        <li><a href="">History</a></li>            
        <li><a href="" >Mission</a><img src="images/right_menu.png" /></li>
        <li style="margin:0;padding:0;"><img src="images/left_menu.png" /></li>
    </ul>
</div>

CSS: 

.menu ul{
    list-style:none;

}

.menu li{
    float:right;
    background:url('images/menuBGrepX.png') repeat-x ;
    margin-right:10px;
    text-transform:uppercase;
}

.menu a{
    display:block;
    text-decoration:none;
    color:#fff;
    padding:5px 2px;
    float:left;
}



.menu li.selected{
    background:#A07E4E;

}

.menu li:hover{
    background:#A07E4E;
    color:#313131;

}

Как вы можете ожидать, цвет фона li меняется, когда кто-то одиннаведите на него курсор, но левое и правое изображение, которое я использую для придания округлого ощущения границы, останется неизменным.Пожалуйста, помогите мне.Вы можете проверить временную работу здесь: http://www.examplecode.info/enam/pleasehelp/.Thanks заранее.

Ответы [ 4 ]

4 голосов
/ 28 февраля 2011

Используйте jQuery плагин для круглых углов для перекрестных углов браузера.

http://jquery.malsup.com/corner/

Поддерживается во всех браузерах, включая IE.Он рисует углы в IE, используя вложенные элементы div (без изображений).Он также имеет встроенное округление радиуса границы в браузерах, которые его поддерживают (Opera 10.5+, Firefox, Safari и Chrome).Поэтому в этих браузерах плагин просто устанавливает вместо этого свойство css.

Вот как его использовать

Вам необходимо включить jQuery и js-скрипт Corner перед </body>.Затем напишите свой jQuery как $ ('div, p'). Corner ('10px');и поставить перед ''.Таким образом, ваш HTML будет выглядеть как приведенный ниже код.Здесь я делаю круглые углы для всех тегов div и p.Если вы хотите сделать это для определенного идентификатора или класса, то вы можете сделать что-то вроде $('#myid').corner();

<body>
    <div class="x"></div>
    <p class="y"></p>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<script>$('div, p').corner();</script>
</body>

Проверить рабочий пример на http://jsfiddle.net/VLPpk/1

1 голос
/ 28 февраля 2011

Хотелось бы узнать, почему ваш клиент попросил вас не использовать CSS3 закругленные углы? Это звучит как очень близорукая просьба. Единственная возможная причина для указания этого заключается в том, что некоторые браузеры (IE6 / 7/8) не поддерживают его.

Во всех других браузерах CSS border-radius является на сегодняшний день лучшим решением для закругленных углов. Все остальные решения имеют серьезные проблемы. Есть причина, почему решение CSS3 внезапно стало очень популярным, и это потому, что оно решает все проблемы, с которыми люди сталкивались ранее.

Существует ряд решений, которые позволяют использовать CSS3 border-radius браузерами, которые его поддерживают, и используют Javascript для IE6 / 7/8. Я бы серьезно рекомендовал одно из этих решений. Лучший из известных мне CSS3Pie , но есть и ряд других.

0 голосов
/ 28 февраля 2011

В вашем css для элемента списка hovered вы также должны изменить изображение. Например: 

.menu li:hover {
   background:url('images/menuBGrepX_hover.png') repeat-x ;
   color:#313131;
}

Вы не можете изменить цвет изображения только с помощью CSS, вы должны полностью изменить изображение.

0 голосов
/ 28 февраля 2011

Разрешен ли JavaScript?
присвойте всем элементам идентификатор и добавьте к ссылке события onMouseOver () и onMouseOut (), где вы вызываете getElementById () на каждой из ваших границ и изменяете их с помощью src = "images / newimage.jpg".

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

Нет похожих вопросов

...