Аватара пользователя CabinetAdmin 18 ноя 2012, 10:09

Горизонтальное меню с эффектом аккордеона

Изображение
Наше меню работает не только на CSS, но и на jQuery. Поэтому первым делом мы подключим скрипты.
Перед закрывающим тегом </head> ставим:

Код: Выделить всё

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
      lastBlock = $("#a1");
    maxWidth = 210;
    minWidth = 75;    
    
    $("ul li a").hover(    
        function(){            
            $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
            $(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
            currentBlock = this;                
            lastBlock = this;            
        }
    );
  });
</script>
Если у вас уже подключена библиотека, то:

Код: Выделить всё

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

можно удалить

Далее в нужное место ставим html нашего меню:

Код: Выделить всё

<ul>
     <li>
         <a id="a1">
             <img src="изображение 1" />
            <p>
                <strong>Заголовок</strong><br/>
                Описание 1 блока
            </p>
        </a>
     </li>
     <li>
         <a>
             <img src="изображение 2" />
            <p>
                <strong>Заголовок</strong><br/>
                Описание 2 блока 
            </p>
        </a>
     </li>
     <!-- Плюс дополнительные пункты меню -->

</ul>
В структуре меню должен быть только один id="a1".
id="a1" - говорит нам какой элемент будет открыт при загрузке страницы.
Если вам нужно, чтобы при загрузке страницы все блоки были закрыты, то все элементы <a> должны быть без идентификатора - id="a1"

Затем в конец темы вашего стиля добавляем CSS:

Код: Выделить всё

ul {
    list-style: none;
    font-family: Arial, sans-serif;
    font-size: 11px;
    margin: 0px;
    padding: 0px;
}

ul li {
    float: left;
    padding: 0 10px;    
    display: block;
    margin-right: 5px;    
    color: #323232;
    border-right: 1px solid #881212;
}

ul li p strong {
    color: #000;
    font-size: 13px;
    font-family: Georgia;
}

ul li a {    
    display: block;    
    overflow: hidden;
    height: 75px;
    width: 75px;
    cursor: pointer;    
}

#a1 {
    width: 210px;
}

ul li img {    
    z-index: 100;
    position: absolute;
    border: 3px solid #881212;    
}

ul li p {    
    margin: 0;
    padding: 0;
    width: 120px;
    display: block;
    margin-left: 85px;    
}​
В примере использованы изображения размером - 69х69. Если вы будете использовать изображения других размеров, нужно будет немного править CSS, height: 75px; и width: 75px;:

Код: Выделить всё

ul li a {    
    display: block;    
    overflow: hidden;
    height: 75px;
    width: 75px;
    cursor: pointer;    
}
Demo

CabinetAdmin

  • 0
  • Подписаться на тему
  • В закладки
Комментарии: 15
  • Сначала старые:
    Сначала новые:

CabinetAdmin 13 фев 2013, 15:33 Сообщение

romaamor писал(а):Ужос.Вообще поломало.

Код: Выделить всё

	<ul>
     <li>
         <a>
             <img src="http://i2.imageban.ru/out/2012/11/18/e09997a9b6f3dcd6b74038f130d7518c.png" />
            <p>
                <strong>Халява</strong><br />
                Скачать бесплатно.
            </p>
        </a>
     </li>
    <li>
         <a> 
     <ul>
     <li>
         <a>
             <img src="http://i2.imageban.ru/out/2012/11/18/e09997a9b6f3dcd6b74038f130d7518c.png" />
            <p>
                <strong>Халява</strong><br />
                Скачать бесплатно.
            </p>
        </a>
     </li>
    <li>
         <a>
и:

Код: Выделить всё

<ul>
     <li>
         <a>
             <img src="http://i2.imageban.ru/out/2012/11/18/e09997a9b6f3dcd6b74038f130d7518c.png" />
            <p>
                <strong>Халява</strong><br />
                Скачать бесплатно.
            </p>
        </a>
     </li>
    <li>
         <a> 
     <ul>
     <li>
         <a>
             <img src="http://i2.imageban.ru/out/2012/11/18/e09997a9b6f3dcd6b74038f130d7518c.png" />
            <p>
                <strong>Халява</strong><br />
                Скачать бесплатно.
            </p>
        </a>
     </li>
    <li>
         <a>
Конечно поломало, ещё бы:)
Ответить
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Вернуться в «HTML модификации»

Похожие темы