• Страница 1 из 1
  • 1
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » Меню » Меню "Аккордион" jQuery
Меню "Аккордион" jQuery
exclusiv...
/avatar/01/4333-414916.png
1');return false;" rel="nofollow" href="javascript://" name="1171">
27.11.2011 в 13:07

Посмотреть DEMO

Меню переделывал под себя, кому нужен оригинал тому СЮДА
ОРИГИНАЛЬНОЕ DEMO

Вариант установки №1:
Скачать архив, залить картинки в папку images, скрипты в папку js;

В CSS вставить код:
Code
/* Menu accordion */        
        ul, li {margin:0; padding:0}        
        ul.container {margin: 0 auto; padding: 0px 20px 4px 9px; width: 260px}        
        ul.container li {list-style:none; text-align:left}        
        li.menu, li.menu-one {padding:2px 0; width:100%}        
        li.button a, li.button-one a {display:block; font-family:BPreplay, Arial, Helvetica, sans-serif; font-size:14px; color: #222; text-shadow: 1px 1px 1px #888; height:25px; overflow:hidden; padding:5px 20px 0; position:relative; width:210px}        
        li.button a, li.button-one a, li.button a:hover, li.button-one a:hover {text-decoration:none}        
        li.button a span, li.button-one a span {height:31px; position:absolute; right:0; top:0; width:4px; display:block}        
        li.button a.black {background:url(../images/black1.png) top left; font-weight: 700; color:#222; text-shadow: 1px 1px 1px #888}        
        li.button a.black span {background:url(../images/black1.png) top right}        
        li.button-one a.black {background:url(../images/black.png) top left; font-weight: 700; color:#222; text-shadow: 1px 1px 1px #888}        
        li.button-one a.black span {background:url(../images/black.png) top right}        
        li.button a:hover, li.button-one a:hover {background-position:bottom left}        
        li.button a:hover span, li.button-one a:hover span {background-position:bottom right}        
        .dropdown {display:none; padding-top:5px; width:250px}        
        .dropdown li {background-color:#444; border:1px solid #333; margin:5px 0; padding:4px 18px}        
        .dropdown li a {color: #CCC; text-decoration:none}        
        /* -------------- */

Далее в нужное место вставляем код меню:
Code
<ul class="container">  
                <li class="menu-one button-one"><a href="/" class="black">Главная <span></span></a></li>  
                <li class="menu">  
                  <ul>  
                    <li class="button"><a href="#" class="black">Раздел 1 <span></span></a></li>  
                    <li class="dropdown">  
                      <ul>  
                        <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>  
                        <li><a href="">Пока пусто</a></li>  
                        <li><a href="">Пока пусто</a></li>  
                        <li><a href="">Пока пусто</a></li>  
                      </ul>  
                    </li>  
                  </ul>  
                </li>  
                <li class="menu">  
                  <ul>  
                    <li class="button"><a href="#" class="black">Раздел 2 <span></span></a></li>  
                    <li class="dropdown">  
                      <ul>  
                        <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>  
                        <li><a href="">Пока пусто</a></li>  
                        <li><a href="">Пока пусто</a></li>  
                      </ul>  
                    </li>  
                  </ul>  
                </li>  
                <li class="menu">  
                  <ul>  
                    <li class="button"><a href="#" class="black">Раздел 3 <span></span></a></li>  
                    <li class="dropdown">  
                      <ul>  
                        <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>  
                        <li><a href="">Пока пусто</a></li>  
                      </ul>  
                    </li>  
                  </ul>  
                </li>  
                <li class="menu">  
                  <ul>  
                    <li class="button"><a href="#" class="black">Раздел 4 <span></span></a></li>  
                    <li class="dropdown">  
                      <ul>  
                        <li><a href="">Пока пусто</a></li>  
                        <li><a href="">Пока пусто</a></li>  
                        <li><a href="">Пока пусто</a></li>  
                      </ul>  
                    </li>  
                  </ul>  
                </li>  
                <li class="menu-one button-one"><a href="/forum" class="black">Форум <span></span></a></li>  
              </ul>  
  <script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>             
  <script type="text/javascript" src="/js/script.js"></script>

Вариант установки №2:

Скачать архив, залить картинки в папку images, скрипты в папку js;

В нужное место шаблона вставляем код:
Code
<div style="width:260px;">  
  <style type="text/css">  
  /* Menu accordion */       
       ul, li {margin:0; padding:0}       
       ul.container {margin: 0 auto; padding: 0px 20px 4px 9px; width: 260px}       
       ul.container li {list-style:none; text-align:left}       
       li.menu, li.menu-one {padding:2px 0; width:100%}       
       li.button a, li.button-one a {display:block; font-family:BPreplay, Arial, Helvetica, sans-serif; font-size:14px; color: #222; text-shadow: 1px 1px 1px #888; height:25px; overflow:hidden; padding:5px 20px 0; position:relative; width:210px}       
       li.button a, li.button-one a, li.button a:hover, li.button-one a:hover {text-decoration:none}       
       li.button a span, li.button-one a span {height:31px; position:absolute; right:0; top:0; width:4px; display:block}       
       li.button a.black {background:url(/images/black1.png) top left; font-weight: 700; color:#222; text-shadow: 1px 1px 1px #888}       
       li.button a.black span {background:url(/images/black1.png) top right}       
       li.button-one a.black {background:url(/images/black.png) top left; font-weight: 700; color:#222; text-shadow: 1px 1px 1px #888}       
       li.button-one a.black span {background:url(/images/black.png) top right}       
       li.button a:hover, li.button-one a:hover {background-position:bottom left}       
       li.button a:hover span, li.button-one a:hover span {background-position:bottom right}       
       .dropdown {display:none; padding-top:5px; width:250px}       
       .dropdown li {background-color:#444; border:1px solid #333; margin:5px 0; padding:4px 18px}       
       .dropdown li a {color: #CCC; text-decoration:none}       
       /* -------------- */  
  </style>  
        <ul class="container">  
          <li class="menu-one button-one"><a href="/" class="black">Главная <span></span></a></li>  
          <li class="menu">  
            <ul>  
              <li class="button"><a href="#" class="black">Раздел 1 <span></span></a></li>  
              <li class="dropdown">  
                <ul>  
                  <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>  
                  <li><a href="">Пока пусто</a></li>  
                  <li><a href="">Пока пусто</a></li>  
                  <li><a href="">Пока пусто</a></li>  
                </ul>  
              </li>  
            </ul>  
            </li>  
          <li class="menu">  
            <ul>  
              <li class="button"><a href="#" class="black">Раздел 2 <span></span></a></li>  
                    
              <li class="dropdown">  
                <ul>  
                  <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>  
                  <li><a href="">Пока пусто</a></li>  
                  <li><a href="">Пока пусто</a></li>  
                </ul>  
              </li>  
            </ul>  
            </li>  
          <li class="menu">  
            <ul>  
              <li class="button"><a href="#" class="black">Раздел 3 <span></span></a></li>  
              <li class="dropdown">  
                <ul>  
                  <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>  
                  <li><a href="">Пока пусто</a></li>  
                </ul>  
              </li>  
            </ul>  
            </li>  
          <li class="menu">  
            <ul>  
              <li class="button"><a href="#" class="black">Раздел 4 <span></span></a></li>  
              <li class="dropdown">  
                <ul>  
                  <li><a href="">Пока пусто</a></li>  
                  <li><a href="">Пока пусто</a></li>  
                  <li><a href="">Пока пусто</a></li>  
                </ul>  
              </li>  
            </ul>  
            </li>  
          <li class="menu-one button-one"><a href="/forum" class="black">Форум <span></span></a></li>      
          </ul>  
  </div>

Далее перед закрывающим тегом
Code
</body>

вставляем скрипты:
Code
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>       
  <script type="text/javascript" src="/js/script.js"></script>

ВСЁ!
Автор lewonchik
Источник http://webstory.ucoz.net/
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » Меню » Меню "Аккордион" jQuery
  • Страница 1 из 1
  • 1
Поиск: