Страница 1 из 1

Как создать раскрывающееся меню?

СообщениеДобавлено: 18 май 2011, 16:03
networker
Как создать раскрывающееся меню?
Чтобы разделы и подразделы раскрывались как на сайте alibaba.com
Возможно ли это?

Re: Как создать раскрывающееся меню?

СообщениеДобавлено: 18 май 2011, 16:41
omvitamin
Выпадающее меню что ли?

Re: Как создать раскрывающееся меню?

СообщениеДобавлено: 19 май 2011, 12:51
benassi
Да, кстати, тоже интересно, как так сделать. Чтобы при наведении на категорию выдавало подкатегории, либо по нажатию на категорию выдавало подкатегории. Может кто чиркнет такой скрипт за небольшую сумму?

Re: Как создать раскрывающееся меню?

СообщениеДобавлено: 19 май 2011, 13:57
omvitamin
Вам на яваскрипт, или на css?
Горизонтальную ориентацию основных категорий, или вертикальную?

Re: Как создать раскрывающееся меню?

СообщениеДобавлено: 21 май 2011, 04:08
networker
Вертикальная ориентация основных категорий.
Как сделать чтобы при наведении на категорию, выпадало подкатегории?
В каких файлах править?
Как сделать это на css?

Re: Как создать раскрывающееся меню?

СообщениеДобавлено: 21 май 2011, 05:17
networker
Вертикальное CSS меню
HTML код:

Код: Выделить всё
<ul id="navmenu-v">
    <li><a href="#">Вертикальное</a>
    <ul>
        <li><a href="#">Ссылка 1</a></li>
        <li><a href="#">Ссылка 2</a></li>
        </ul></li>
    <li><a href="#">CSS</a>
      <ul>
        <li><a href="#">Ссылка 1</a></li>
        <li><a href="#">Ссылка 2</a></li>
        <li><a href="#">Ссылка 3</a></li>
        <li><a href="#">Ссылка 4</a></li>
        <li><a href="#">Ссылка 5</a></li>
        </ul>
        </li>
        <li><a href="#">Меню</a>
        <ul>
        <li><a href="#">Ссылка 1</a></li>
        <li><a href="#">Ссылка 2</a></li>
        </ul></li> 
  </ul>


И CSS код:

Код: Выделить всё
/* CSS Document */
ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
}

ul#navmenu-v:after {
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu-v li {
  float: left;
  display: block !important;
  display: inline;
  position: relative;
  border:#003366 1px solid;
}
ul#navmenu-v li ul li {
border:none;
border-bottom:#FFFFFF 2px solid;
}

/* Root Menu */
ul#navmenu-v a {
  padding: 0 6px;
  display: block;
  background: #003366;
  color: #FFFFFF;
  font: bold 12px/28px Verdana, Arial;
  text-decoration: none;
  height: auto !important;
  height: 1%;
}


ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li.iehover a {
  background: #FFFFFF;
  color: #000000;

}

/* 2nd Menu */
ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
  background: #003366;
  color: #FFFFFF;
  border:#003366 1px solid;
}


ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
  background: #FFFFFF;
  color: #003366;
  border:#003366 1px solid;
}



ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 161px;
}


ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
  display: none;
}

ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
  display: block;
}


Ну и небольшой JS код для корректности отображения в IE:

Код: Выделить всё
navHover = function() {
        var lis = document.getElementById("navmenu-v").getElementsByTagName("LI");
        for (var i=0; i<lis.length; i++) {
                lis[i].onmouseover=function() {
                        this.className+=" iehover";
                }
                lis[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" iehover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", navHover);


Это все понятно.
Подскажите пожалуйста в каких файлах и как структуру div переделать в список UL

Re: Как создать раскрывающееся меню?

СообщениеДобавлено: 24 май 2011, 20:32
mnemonic
MenuFolderColumn.tpl
MenuFolderItem0.tpl
MenuFolderItem1.tpl
MenuFolderItem2.tpl
...

Re: Как создать раскрывающееся меню?

СообщениеДобавлено: 25 май 2011, 15:38
benassi
omvitamin писал(а):Вам на яваскрипт, или на css?
Горизонтальную ориентацию основных категорий, или вертикальную?

Скрипт уже сюда выложили, как раз нужен вертикальный.
Может приделаете за небольшую плату этот скрипт к доске?

Re: Как создать раскрывающееся меню?

СообщениеДобавлено: 06 июн 2011, 22:41
hdd
А где шаблон работы посмотреть можно?