.active и hover в меню

[15.03.2012 | 00:35]

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

Оценить:+|–

Комментировать

Раздел: Помощь
Просмотров: 2275

Комментариев (18)

slaffko

15.03.2012 в 00:50

html:

<ul class="menu">
<li><a href="#"><span>Главная</span></a></li>
<li><a href="#"><span>О компании</span></a></li>
<li><a href="#"><span>И так дальше</span></a></li>
</ul>

css:

.menu li{float:left;margin-left:-1px}
.menu a{display:block; padding:5px 0; border-bottom:2px solid #000;}
.menu a:hover{border-color:#f00;}
.menu a span{display:block; line-height:1; padding:0 15px; border-left:1px solid #000; border-right:1px solid #000;}
.menu a:hover span{border-color:#f00}

Оценить:+|–0

aleks
15.03.2012 в 01:04

не подходит.
при ховере делается 2 бордера

Войдите, чтобы ответить
Оценить:+|–0

Лев Дагнер [through-a-haze]
15.03.2012 в 00:44

а на бэкграунд этот бордер в виде картинки не проще будет кинуть ?

Войдите, чтобы ответить
Оценить:+|–0
- aleks
  15.03.2012 в 01:07
  
  как?
  если знаете способ, скажите пожалуйта.
  
  Войдите, чтобы ответить
  Оценить:+|–0
  - Лев Дагнер [through-a-haze]
    15.03.2012 в 01:16
    
    серую полоску на бэкграунд «ul» прижимаем bottom, на «li» при ховере просто белый бэкграунд цветом и padding:0 1px;, а на «a» красную полоску бэкграундом и тоже bottom
    
    Войдите, чтобы ответить
    Оценить:+|–0
    - aleks
      15.03.2012 в 02:28
      
      но там есть еще полоски слева и справа, и в них заключается вся трудность
      
      Войдите, чтобы ответить
      Оценить:+|–0
      - Лев Дагнер [through-a-haze]
        15.03.2012 в 10:49
        
        тогда можно так: левый бордер и белое пространство под ним вырезаем картинкой в 1 пикс. и кидаем на «li» background: url(«…») no-repeat left bottom; и задаем padding-left: 1px; а нижнюю красную полоску вместе с правым бордером вытягиваем в фотошопе на длину менюшки, типа такого __________________________| и кидаем на «a» background: url(«…») no-repeat right bottom;
        и не забываем про display:block для «a»)
        надеюсь, я понятно выражаюсь =)
        
        вот для наглядности)
        
        Оценить:+|–0
slaffko
15.03.2012 в 01:03

Немного поигрался, получилось такое: https://jsfiddle.net/wsTmu/1/
серый фон не ставил, проще всего картинкой сделать

Войдите, чтобы ответить
Оценить:+|–0
- Лев Дагнер [through-a-haze]
  15.03.2012 в 01:09
  
  а как же IE 8 и более ранние версии сего «браузера» ?
  это я про псевдоэлемент :before
  
  Войдите, чтобы ответить
  Оценить:+|–0
  - slaffko
    15.03.2012 в 01:14
    
    Можно вместо :before использовать пустой тег, например
    <li><a href="#"><span>Главная</span><b></b></a></li>
    
    Войдите, чтобы ответить
    Оценить:+|–0
    - Лев Дагнер [through-a-haze]
      15.03.2012 в 01:20
      
      интересный способ) но мне кажется картинками на бэкграунд будет проще, кроссбраузернее и без костылей =) имхо, конечно)
      
      Войдите, чтобы ответить
      Оценить:+|–0
      - slaffko
        15.03.2012 в 14:43
        
        не думаю что картинками будет проще, попробуй
        
        Оценить:+|–0
      - Лев Дагнер [through-a-haze]
        15.03.2012 в 18:46
        
        ну просто я подобные вещи привык картинками делать и мне так проще кажется)
        
        Оценить:+|–0
      - slaffko
        15.03.2012 в 18:57
        
        это только кажется. ты попробуй и покажи. если картинками делать то без дополнительного тега не обойтись, или опять же псевдокласс :before
        А с дополнительным тегом без картинок и псевдоклассов обойтись можно
        
        Оценить:+|–0
      - Лев Дагнер [through-a-haze]
        15.03.2012 в 19:06
        
        картинками можно легко обойтись без дополнительного тега и псевдокласса) тегов «li» и «a» вполне достаточно)
        я в начале описал как
        
        Оценить:+|–0
      - slaffko
        15.03.2012 в 19:30
        
        а как сделать вертикальные полоски разделители? А лучше не писать как а показать, как я это сделал
        
        Оценить:+|–0
      - Лев Дагнер [through-a-haze]
        15.03.2012 в 22:10
        
        теми же бэкграундами)
        например так
        
        кстати, все резиновое и все тянется)
        
        Оценить:+|–0
  - slaffko
    15.03.2012 в 01:12
    
    ИЕ8 замечательно понимает :before, а для ие7 есть костыль https://www.xiper.net/collect/html-and-css-tricks/glyuki-brauzerov/IE/after-before-for-ie.html
    
    Войдите, чтобы ответить
    Оценить:+|–0

Оставить комментарий
Отменить ответ

Для отправки комментария вам необходимо авторизоваться.

HTMLCSS/aleks Профиль

.active и hover в меню

Оставить комментарий Отменить ответ

HTMLCSS/aleks ^{Профиль}

Оставить комментарий
Отменить ответ