Воскресенье, 06.07.2025, 02:10
Главная Регистрация RSS
Приветствую Вас, Гость
Никнейм Шампусик зарегистрирован!
Меню сайта
Категории раздела
Мои файлы [4]
всё для uCoz [7]
Наш опрос
Оцените мой сайт
Ответов: 1 Результаты | Архив
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Вход на сайт
Старая форма входа
Поиск
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • База знаний uCoz
    • Главная » Файлы » Мои файлы
    Меню "аккордеон"
    14.01.2015, 13:11

    Шаг 1. Конструкция меню в HTML.
    Сперва создадим html-каркас, который станет основой для нашего нового меню. Ниже вы увидите пример такого html – каркаса:
    HTML:
     

    Код
     
    <div style="float:left" >

    <div id="firstpane" class="menu_list">

    <p class="menu_head">Меню</p>

    <div class="menu_body">

    <a href="#">Главная</a>

    <a href="#">Форум</a>

    <a href="#">Блог</a>

    <a href="#">Контакты</a>

    <a href="#">О проекте</a>

    </div>

    <p class="menu_head">Публикации</p>

    <div class="menu_body">

    <a href="#">Новости</a>

    <a href="#">Статьи</a>

    <a href="#">Закачки</a>

    </div>

    <p class="menu_head">Профиль</p>

    <div class="menu_body">

    <a href="#">Мои друзья</a>

    <a href="#">Мои сообщения</a>

    <a href="#">Мои файлы</a>

    <a href="#">Выйти</a>

    </div>

    </div>

    </div>


    Шаг 2. Дизайн меню в CSS:

    После того, как создали основу меню, приступим к стилям. CSS-коды для объектов навигации, которые мы к ним привязали, прописываем между тегами и в файле шаблона.

     Ниже приведен код этих стилей:
    CSS:
     

    Код
     
    <style type="text/css">
    body {
    margin: 10px auto;
    font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
    }
    .menu_list {
    width: 150px;
    }
    .menu_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    margin:1px;
    font-weight:bold;
    background: #333 url(images/left.png) center right no-repeat;
    color:#fff;
    }
    .menu_body {
    display:none;
    }
    .menu_body a{
    display:block;
    color:#555;
    background-color:#999;
    padding-left:10px;
    font-weight:bold;
    text-decoration:none;
    }
    .menu_body a:hover{
    color: #333;
    text-decoration:underline;
    }
    </style>


    Шаг 3. Прикручиваем фреймворк jQuery.
    А теперь, пожалуй, самое главное – не забыть привязать важнейший фреймворк jQuery между тегами

    и

     

    Код

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


    Шаг 4. Последний момент нашего урока - вставка необходимых JavaScript'ов.

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

    Код
     
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#firstpane p.menu_head").click(function()
    {
    $(this).css({backgroundImage:"url(images/down.png)"}).next("div.menu_body")
    .slideToggle(300)
    .siblings("div.menu_body").slideUp("slow");
    $(this).siblings().css({backgroundImage:"url(images/left.png)"});
    });
    });
    </script>


    Вот и все. Проверяем результат проделанной работы.

     

    Категория: Мои файлы | Добавил: skupev | Теги: меню, аккордеон
    Просмотров: 356 | Загрузок: 0 | Рейтинг: 0.0/0
    Всего комментариев: 0
    Подписка:1

    Код *: