Показать сообщение отдельно
  #7 (permalink)  
Старый 13.02.2013, 14:33
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Усилю нажим со стилями...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.btnnavi {
	background-color:rgba(0,0,0,0.7);
	height:90px;
	width:15%;
	color:white;
	border-style:hidden;
	border-bottom-left-radius:1px;/*for button transparency in opera*/
	font-size:90%;
	-webkit-transition-property:background-color, li; 
	-webkit-transition-duration: 1s, 1s; 
	-webkit-transition-timing-function: linear, ease-in;
	-moz-transition-property:background-color, li; 
	-moz-transition-duration:1s; 
	-moz-transition-timing-function: linear, ease-in; 
	-o-transition-property:background-color, li; 
	-o-transition-duration:1s; 
	-o-transition-timing-function: linear, ease-in;
}
.btnnavi:first-child {
	border-bottom-left-radius:15px;
	border-top-left-radius:15px;
}
.btnnavi:last-child {
	border-bottom-right-radius:15px;
	border-top-right-radius:15px;
}
.btnnavi:hover {
	background-color:rgba(0,110,255,0.7);
}
.btnnavi:active {
	background-color:rgba(255,162,0,0.7);
}
.btnnavi.on:hover,
.btnnavi.on:active,
.on {
	background-color: orange;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
	$('.btnnavi').click(function () {
		$('.bodyTop .btnnavi').removeClass('on');
		$(this).addClass('on');
	});
});
</script>
</head>
<body>
<div class="bodyTop"> 
	<button class="btnnavi" value="1">Главная</button>
	<button class="btnnavi" value="2">Порядок работы</button>
	<button class="btnnavi" value="3">Стоимость услуги</button>
	<button class="btnnavi" value="4">Контакты</button>
	<button class="btnnavi" value="5">Документы</button>
	<button class="btnnavi" value="6">Информация</button>
</div>
</body>
</html>
Ответить с цитированием