Работая над редизайном раздела своего сайта, мне в голову пришла идея сделать меню и весь раздел на css. Сейчас поясню подробнее. Одним из нововведений css 3.0, является псевдокласс :target, который применяется к целевому элементу (к идентификатору, указанному в адресной строке браузера) (см. рис. 1).
Рис. 1 Целевой элемент #bk.
Следовательно, мы можем на страницы разместить якоря, которые будут ссылаться на определенные элементы страницы. Тем самым при переходе по этим ссылкам мы будем применять к ним псевдокласс :target.Теперь следует сказать, что псевдокласс :target поддерживается почти всеми ныне ходовыми браузерами (Chrome, Safari, FireFox, Opera), кроме Internet Explorerа младше 9.0. Поэтому метод реализации меню средствами css пока лучше заменять JQuery или верстать по старинке с переходом на отдельные страницы, пока не «отомрут» все браузеры не поддерживающие css 3.0.
Представляю Вам отверстанную страницу html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link rel="stylesheet" type="text/css" href="corp.css"/>
</head>
<body><div class="part_left">
<ul>
<li><a href="#bk">Бизнес кредиты</a></li>
<li><a href="#rko">Расчетно кассовое обслуживание</a></li>
<li><a href="#dbo">ДБО</a></li>
<li><a href="">Конверсионные операции</a></li>
<li><a href="">Корпоративные карты</a></li>
<li><a href="">Зарплатный проект</a></li>
<li><a href="">Депозиты</a></li>
<li><a href="">Векселя</a></li>
</ul>
</div>
<div class="part_right">
<ul>
<li id="default">это IE</li>
<li id="bk">Бизнес кредиты... </li>
<li id="rko">Расчетно кассовое обслуживание...</li>
<li id="dbo">Дистанционное банковское обслуживание...</li>
</ul>
</div>
</body>
<html>
* This source code was highlighted with Source Code Highlighter.a{
font-family:Arial, Helvetica, sans-serif;
font-size:12pt;
color:black;
font-weight:bold;
}
a:link{text-decoration:none;}
a:hover{text-decoration:underline;}
a:active{color:#0000CC;}
ul{
margin:0;
-webkit-padding-start:0;
-moz-padding-start:0;
}
li {list-style:none;}
.part_left{
position:absolute;
left:0;
top:0;
width:300px;
}
.part_right{
position:absolute;
left:305px;
top:0;
width:auto;
}
/* Задаем параметры для фрагмента #bk, и остальных пунктов меню*/
/* Значения по умолчанию */
li#bk, li#rko, li#dbo{
display:none;
}
/* Когда ссылка активирована */
li#bk:target, li#rko:target, li#dbo:target{
display:block;
}
/*Возврат к визуализации по умолчанию */
li#bk:not(:target),li#rko:not(:target), li#dbo:not(:target){
display:none;
}
/* ------- */
/* Дефолтный случай для IE <9.0*/
li#default{
display:block;
}
/*li#default:target{
display:block;
}*/
li#default:not(:target){
display:none;
}
* This source code was highlighted with Source Code Highlighter.
Комментариев нет:
Отправить комментарий