Това е втори вариант на заоблените бутончета, при който ползвам sprite. На мен лично ми изглежда по-лесничък от другия, но сега се сетих за него 🙂
<ul class="tab_bar"> <li> <a class="active" title="Menu 1" href="#"><span><strong>Menu 1</strong></span></a> </li> <li> <a title="Menu 2" href="#"><span><strong>Menu 2</strong></span></a> </li> <li> <a title="Menu 3" href="#"><span><strong>Menu 3</strong></span></a> </li> <li> <a title="Menu 4" href="#"><span><strong>Menu 4</strong></span></a> </li> </ul> |
отново всичко е сложено в <a> като и тук span държи дясното заобляне, а strong държи триъгълничето за hover ефекта. Разбира се като за начало правим един reset на ul-то.
ul { list-style-image:none; list-style-position:outside; list-style-type:none; } .tab_bar { overflow: hidden; } .tab_bar li{ float: left; } .tab_bar li a{ background: url(images/tab.jpg) no-repeat 0 -32px; padding: 0px 0 0px 8px; display: block; line-height:32px; text-decoration: none; color: #000; } .tab_bar li a span{ background: url(images/tab.jpg) no-repeat right -32px; padding: 0px 8px 0px 0px; display: block; } .tab_bar li a:hover{ background: url(images/tab.jpg) no-repeat 0 0; color: #fff; } .tab_bar li a:hover span{ background: url(images/tab.jpg) no-repeat right 0; } .tab_bar li a:hover span strong{ background: url(images/tab.jpg) no-repeat 50% 0px; display: block; } |
Ето го и самият пример
LEAVE A COMMENT