Дизайн принадлежит администрации сайта VSEpodrad.ru.
Администрация не несет ответственности за содержимое на нашем портале.
Администратор: .
|
Меню сайта
Смотри и качай бесплатно
Опрос сайта
Реклама
Онлайн пользователи
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Раздел в разработке
VSEpodrad.ru
В разработке!
На сайт добавлено файлов
Перекрывающиеся кнопки в меню
Перекрывающиеся кнопки в меню
Периодически мне для вёрстки попадаются макеты в навигации у которых присутствуют перекрывающиеся по краям кнопки. Часто таким образом выделяют пункт меню открытой в данный момент страницы. У некоторых это вызывает некоторые трудности в реализации. В связи с этим выкладываю простой пример с подобным эффектом.
Code
<ul>
<li><a href="" title="">О нас</a></li>
<li><a href="" title="">Новости</a></li>
<li class="active"><span>Услуги</span></li>
<li><a href="" title="">Портфолио</a></li>
<li><a href="" title="">Контакты</a></li>
</ul>
<li><a href="" title="">О нас</a></li>
<li><a href="" title="">Новости</a></li>
<li class="active"><span>Услуги</span></li>
<li><a href="" title="">Портфолио</a></li>
<li><a href="" title="">Контакты</a></li>
</ul>
Code
ul{
list-style-type:none;
font-size:0.9em;
color:#fff;
height:50px;
width:505px;
margin:0 auto
}
ul li{
float:left;
border-right:solid 1px #fff;
position:relative;
z-index:5;
background:#96B1D4 url(images/lc.gif) no-repeat -5px top;
text-align:center
}
ul li.active{
z-index:10;
background:#9A2D7F url(images/lc.gif) no-repeat left -5px;
border:none;
margin:0 -9px 0 -10px;
top:-10px
}
ul li a{
float:left;
display:block;
padding:10px 0;
background:url(images/rc.gif) no-repeat 95px top;
text-decoration:none;
color:#fff;
width:100px
}
ul li span{
float:left;
display:block;
padding:15px 0;
position:relative;
background:url(images/rc.gif) no-repeat 109px -5px;
width:119px
}
list-style-type:none;
font-size:0.9em;
color:#fff;
height:50px;
width:505px;
margin:0 auto
}
ul li{
float:left;
border-right:solid 1px #fff;
position:relative;
z-index:5;
background:#96B1D4 url(images/lc.gif) no-repeat -5px top;
text-align:center
}
ul li.active{
z-index:10;
background:#9A2D7F url(images/lc.gif) no-repeat left -5px;
border:none;
margin:0 -9px 0 -10px;
top:-10px
}
ul li a{
float:left;
display:block;
padding:10px 0;
background:url(images/rc.gif) no-repeat 95px top;
text-decoration:none;
color:#fff;
width:100px
}
ul li span{
float:left;
display:block;
padding:15px 0;
position:relative;
background:url(images/rc.gif) no-repeat 109px -5px;
width:119px
}
Как видите ключевыми свойствами в примере являются margin и z-index применяемые к элементам li, остальные можно в той или иной степени менять по своему усмотрению.
Вы сейчас просматриваете Перекрывающиеся кнопки в меню. Данный файл находится в категории Скрипты для ucoz. Чтобы увидеть другие файлы из этой категории, перейдите по этой ссылке: Скрипты для ucoz. Для того чтобы скачать Перекрывающиеся кнопки в меню нажмите на кнопку СКАЧАТЬ ФАЙЛ выше. Надеемся вам понравился файл Перекрывающиеся кнопки в меню и пригодился. По всем вопросам обращайтесь в чат на сайте или к администрации.
| Всего комментариев: 0 | |
