Анимированное меню на Mootools

23 09/08
64

Сегодняшний урок описывает создание анимированного меню, с помощью библиотеки Mootools. По умолчанию внешний вид меню выглядит примерно так:

HTML представляет собой следующую структуру. У нас есть div с id="menu", который является контейнером для меню, заголовоки секций (элемент h3) а также меню секций (элемент ul):

Анимированное меню на Mootools

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="menu">
    <h3 class="toggler menusection">Секция 1</h3>
    <ul class="element menusection">
        <li><a href="">Ссылка 1</a></li>
        <li><a href="">Ссылка 2</a></li>
        <li><a href="">Ссылка 3</a></li>
        <li><a href="">Ссылка 4</a></li>
    </ul>
    <h3 class="toggler menusection">Секция 2</h3>
    <ul class="element menusection">
        <li><a href="">Ссылка 1</a></li>
        <li><a href="">Ссылка 2</a></li>
    </ul>
    <!-- По необходимости добавьте дополнительные секции... -->
</div>

Вы можете добавить дополнительные секции, используя структуру кода как в предыдущих секциях.

CSS код текущего примера следующий, однако оформление вы можете изменить по своему вкусу:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

#menu h3{
    background:#E8D7B7;
    padding:4px;
    font-size:12px;
    color:#000;
    border-bottom:solid 2px #9C8B7B;
    cursor:pointer;
    font-weight:normal;
    text-transform:uppercase
}
#menu ul{
    list-style:none
}
#menu li{
    border-bottom:solid 1px #DEDEDE
}
#menu li a{
    padding:3px 6px;
    display:block;
    color:#5CA8CC;
    text-decoration:none
}
#menu li a:hover{
    background:#EFEFEF
}

Осталось добавить саму библиотеку Mootools:

1

<script type="text/javascript" src="mootools.js"></script>

и следующий код в секцию <head>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type="text/javascript">
window.addEvent('domready', function(){
    var accordion = new Accordion('h3.menusection', 'ul.menusection', {
        opacity: false,
        onActive: function(toggler, element){
            toggler.setStyle('color', '#333333');
            toggler.setStyle('background', '#F7F1E5');
        },
        onBackground: function(toggler, element){
            toggler.setStyle('color', '#333');
            toggler.setStyle('background', '#E8D7B7');
        }
    }, $('menu'));
}); 
</script>

Пользуемся!

Оригинал: Nice animated menu using CSS and Mootools

Теги: • • •

Выдвигающаяся панель

26 08/08
33

Сегодняшний урок описывает создание простой выдвигающейся панели, используя CSS и Mootools.

HTML код выглядит очень просто:

1
2
3
4
5
6

<div id="toppanel">
    <div id="slidepanel">
        <!-- Содержимое панели -->
    </div>
    <a href="#" id="toggle">Показать панель</a>
</div>

Мы имеем внешний контейнер <div id="toppanel">, который содержит саму панель <div id="slidepanel"> и кнопку показывающую и скрывающую эту панель.

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

*{
    margin:0;
    padding:0;
}
#toppanel{
    position:absolute;
    left:0;
    top:0;
    width:100%
}
#slidepanel{
    background:#E8D7B7;
    border-bottom:3px solid #9C8B7B;
    text-align:right;
    width:100%
}
#toggle{
    font-size:0.75em;
    display:block;
    width:150px;
    height:25px;
    float:right;
    color:#fff;
    text-decoration:none;
    margin-right:30px;
    font-weight:bold;
    background:url(img/toggle.gif) no-repeat left top;
    padding-top:5px;
    text-align:center
}

Как и всегда, стили отвечающие за визуальное оформление вы можете менять как угодно.

Javascript:

Добавьте этот код в секцию <head> страницы.

1
2
3
4
5
6
7
8

window.addEvent('domready', function() {
    var myVerticalSlide = new Fx.Slide('slidepanel');
    myVerticalSlide.hide();
    $('toggle').addEvent('click', function(e){
        e.stop();
        myVerticalSlide.toggle();
    });
});

… и не забудьте добавить сам фреймворк также в секцию <head>:

1

<script type="text/javascript" src="mootools.js"></script>

Оригинал статьи Sliding top panel using mootools, но там пример в IE работает немного некорректно и панель не располагается над основным содержимым страницы.

Теги: •

CSS: Исходные таблицы стилей

30 07/08
9

Как известно, по умолчанию браузеры используют собственную таблицу стилей для форматирования. Ниже приведён список исходных стилей различных браузеров. Возможно это поспособствует большему пониманию CSS и поможет разобраться в некоторых ситуациях.

Можете сравнить их с вариантами предложенными консорциумом W3C для различных спецификаций:

Источник: User Agent Style Sheets: Basics and Samples

Теги: •

HTML и CSS шпаргалки

17 07/08
16

HTML:

  • XHTML Character Entity Reference — 252 символа из HTML 4 и XHTML 1.0. Можно группировать по категориям и поэкспериментировать с различными шрифтами.

    HTML шпаргалки. XHTML Character Entity Reference

  • HTML Help Sheet

    HTML шпаргалки. HTML Help Sheet

  • HTML Cheat Sheet — тэги, наиболее часто используемые символы, атрибуты, события — всё это удалось уместить на одном листе формата А4.

    HTML шпаргалки. HTML Cheat Sheet

  • RGB Hex Colour Chart — 216 так называемых «безопасных» цветов

    HTML шпаргалки. RGB Hex Colour Chart

  • HTML Character Entities Cheat Sheet — HTML символы. Таблица имеет 4 колонки, каждая из которых в свою очередь поделена еще на 3. В первой отображается код символа, во второй сам символ, ну а в третьей описание символа.

    HTML шпаргалки. HTML Character Entities Cheat Sheet

CSS:

Теги: • •

Выпадающее меню без Javascript

24 06/08
175

В этом посте я покажу вам как сделать выпадающее меню ограничиваясь только средствами HTML и CSS, без использования скриптов. Источником сего примера является полезнейший ресурс CSSPlay. Те у кого этот сайт еще не нашел свое место в закладках, советую сделать это как можно быстрей. На сайте еще много различных и полезных примеров кода.

Приступим…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<div class="menu">
    <ul> 
        <li><a class="hide" href="">Раздел 1</a>
 
        <!--[if lte IE 6]>
        <a href="">Раздел 1
        <table><tr><td>
        <![endif]-->
 
            <ul>
                <li><a href="" title="">Страница 1</a></li>
                <li><a href="" title="">Страница 1.1</a></li>
                <li><a href="" title="">Страница 1.2</a></li>
            </ul>
 
        <!--[if lte IE 6]>
        </td></tr></table>
        </a>
        <![endif]-->
 
        </li>
 
        <li><a class="hide" href="">Раздел 2</a>
 
        <!--[if lte IE 6]>
        <a href="">Раздел 2
        <table><tr><td>
        <![endif]-->
 
            <ul>
                <li><a href="" title="">Страница 2</a></li>
                <li><a href="" title="">Страница 2.1</a></li>
                <li><a href="" title="">Страница 2.2</a></li>
                <li><a href="" title="">Страница 2.3</a></li>
                <li><a href="" title="">Страница 2.4</a></li>
                <li><a href="" title="">Страница 2.5</a></li>
            </ul>
 
        <!--[if lte IE 6]>
        </td></tr></table>
        </a>
        <![endif]-->
 
        </li>
 
</ul> 
</div>

Вы можете добавить дополнительные разделы, при этом необходимо будет изменить в CSS ширину меню. Как вы видите в примере используются условные комментарии, с дополнительным кодом. Это необходимо для браузера IE6.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

.menu{
    font-family:arial, sans-serif;
    width:212px;
    height:100px;
    position:relative;
    font-size:11px;
    z-index:100
}
.menu ul li a, .menu ul li a:visited{
    display:block;
    text-decoration:none;
    color:#000;
    width:104px;
    height:20px;
    text-align:center;
    color:#fff;
    border:1px solid #fff;
    background:#710069;
    line-height:20px;
    font-size:11px;
    overflow:hidden
}
.menu ul{
    padding:0;
    margin:0;
    list-style:none
}
.menu ul li{
    float:left;
    position:relative}
.menu ul li ul{
    display:none
}
.menu ul li:hover a{
    color:#fff;
    background:#36f
}
.menu ul li:hover ul{
    display:block;
    position:absolute;
    top:21px;
    left:0;
    width:105px
}
.menu ul li:hover ul li a{
    display:block;
    background:#ddd;
    color:#000
}
.menu ul li:hover ul li a:hover{
    background:#6fc;
    color:#000
}

Оформление пунктов меню можно менять так как вам хочется. Для IE6 используются дополнительные стили, которые также нужно подключить с помощью условных комментариев:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.menu ul li a.hide, .menu ul li a:visited.hide{
    display:none
}
.menu ul li a:hover{
    color:#fff;
    background:#36f
}
.menu ul li a:hover ul{
    display:block;
    position:absolute;
    top:21px;
    left:0;
    width:105px
}
.menu ul li a:hover ul li a{
    display:block;
    background:#ddd;
    color:#000
}
.menu ul li a:hover ul li a:hover{
    background:#6fc;
    color:#000
}

Вот собственно и все. Пример работает во всех наиболее популярных браузерах, включая IE6. Для корректной работы меню необходимо указать тип документа.

Теги: • •