Anthrax, сие можно было отправить в лс!
bogomol,
Данную панель можно использовать как под меню, контактную форму, так и для любого элемента который должен быть изначально скрыт.
1. CSS
Код
.panel {
padding: 20px;
width: 250px;
background: #eeeeee;
border: #282828 2px solid;
font-family: Georgia;
}
2. Подключение jQuery
3. Подключение jQuery TabSlideOut
4. JavaScript
Все скрипты подключаем в раздел в том порядке в котором указано выше.
5. HTML
Код
Content Заголовок
Любое содержание здесь!
Источник:
На мой взгляд очень нужная вещь!
Источник:
Шаг-1 Html:
- создаём основной контейнер div
- помещаем в него тег
в котором будет отображаться название данного меню
- ниже прописываем списки
- в которые прописываем ссылку на нужный раздел блога
HTML-Code
Шаг-2 CSS:
в сcss стилях всё просто как дважды два:
- прописываем ширину основному контейнеру
- прописываем ссылку на графическое изображение, которое отображается в теги
- тут же прописываем его размеры и отступы
- в начале списков убираем символы и
- устанавливаем нужные атрибуты для ссылки при наведении на них стрелкой мыши
CSS-Code
Код
.blogroll {
position:relative;
width:274px;
}
.blogroll p {
font:13px Verdana,Arial,Helvetica, sans-serif; color:#666;
font-weight: bold;
text-shadow: 1px 1px 1px #fff;
width:274px;
height:25px;
background:url(
http://www.center-dm.ru/ucoz/vid_menu/Blogroll/Blog_fon.png) 0 0 no-repeat;
margin:0;
padding: 4px 0px 0px 10px;
}
.blogroll ul {
list-style:none;
width:272px;
background:#F4F5F6;
border:1px solid #d0d0d0;
border-bottom: none;
border-width:0 1px 1px 1px;
position:absolute;
left:0;
top:25px;
margin:0;
padding:0;
}
.blogroll ul a:link,
.blogroll ul a:visited {
display:block;
color:#555;
font-weight:normal;
text-decoration:none;
width:252px;
padding:4px 10px 4px 10px;
border-bottom: 1px solid #d0d0d0;
border-top: 1px solid #fff;
}
.blogroll ul a:hover,
.blogroll ul a:active {
background:#fff;
}
.blogroll {
height:25px;
overflow:hidden;
}
.blogroll:hover {
overflow:visible;
}
Источник:
