CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 275   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

2

Перекрывающиеся кнопки в меню на CSS

Jemand 10346 , , ,
CSS

1. CSS

ul {
	font-family: Georgia;
	list-style-type: none;
	font-size: 14px;
	color: #fff;
	height: 50px;
	width: 510px;
	margin: 0 auto;
	padding-top: 15px;
	}
ul li {
	float: left;
	padding: 1px;
	text-align: center;
	}
ul li a {
	float: left;
	display: block;
	background: #0094D6;
	text-decoration: none;
	color: #fff;
	position: relative;
	}
ul li a:hover {
	background: #FF7700;
	z-index: 10;
	margin: 0 -10px;
	top: -10px;
	opacity: 0.7;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	-khtml-opacity: 0.7;
	}
ul li a span {
	float: left;
	display: block;
	padding: 10px 0;
	text-decoration: none;
	color: #fff;
	width: 100px;
	cursor: pointer;
	}
ul li a:hover span {
	width: 120px;
	padding: 20px 0;
	}

2. HTML

<ul>
	<li><a href="" title=""><span>Главная</span></a></li>
	<li><a href="" title=""><span>Новости</span></a></li>
	<li><a href="" title=""><span>Контакты</span></a></li>
	<li><a href="" title=""><span>Портфолио</span></a></li>
	<li><a href="" title=""><span>Форум</span></a></li>
</ul>

Демо

Рекламная пауза

» 2 комментария

  1. А можно ли таким или похожим образом сделать вместо блоков картинки? Как-то что-то меняла в коде, но все начинает разъезжаться. Нужно сделать меню с вкладками, при наведении, которые немного вылезают справа и слева поверх соседних кнопок.


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