Скрытые разделы технической поддержки доступны только покупателям. Если вы - покупатель скрипта QPLBoard, пожалуйста, зарегистрируйтесь на форуме и пришлите нам запрос на добавление в группу "Пользователи QPLBoard". После этого вам станут доступны скрытые разделы.

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

Есть вопросы по программированию или дизайну? Вам сюда.

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

Сообщение networker » 18 май 2011, 16:03

Как создать раскрывающееся меню?
Чтобы разделы и подразделы раскрывались как на сайте alibaba.com
Возможно ли это?
networker
Заслуженный пользователь QPLBoard
 
Сообщения: 6
Зарегистрирован: 11 апр 2011, 12:27

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

Сообщение omvitamin » 18 май 2011, 16:41

Выпадающее меню что ли?
omvitamin
Заслуженный пользователь QPLBoard
 
Сообщения: 227
Зарегистрирован: 30 мар 2011, 18:28
Откуда: Химки

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

Сообщение benassi » 19 май 2011, 12:51

Да, кстати, тоже интересно, как так сделать. Чтобы при наведении на категорию выдавало подкатегории, либо по нажатию на категорию выдавало подкатегории. Может кто чиркнет такой скрипт за небольшую сумму?
benassi
Заслуженный пользователь QPLBoard
 
Сообщения: 72
Зарегистрирован: 18 ноя 2010, 22:15

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

Сообщение omvitamin » 19 май 2011, 13:57

Вам на яваскрипт, или на css?
Горизонтальную ориентацию основных категорий, или вертикальную?
omvitamin
Заслуженный пользователь QPLBoard
 
Сообщения: 227
Зарегистрирован: 30 мар 2011, 18:28
Откуда: Химки

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

Сообщение networker » 21 май 2011, 04:08

Вертикальная ориентация основных категорий.
Как сделать чтобы при наведении на категорию, выпадало подкатегории?
В каких файлах править?
Как сделать это на css?
networker
Заслуженный пользователь QPLBoard
 
Сообщения: 6
Зарегистрирован: 11 апр 2011, 12:27

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

Сообщение networker » 21 май 2011, 05:17

Вертикальное 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
networker
Заслуженный пользователь QPLBoard
 
Сообщения: 6
Зарегистрирован: 11 апр 2011, 12:27

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

Сообщение mnemonic » 24 май 2011, 20:32

MenuFolderColumn.tpl
MenuFolderItem0.tpl
MenuFolderItem1.tpl
MenuFolderItem2.tpl
...
Изображение
mnemonic
Site Admin
 
Сообщения: 1367
Зарегистрирован: 31 мар 2008, 23:25

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

Сообщение benassi » 25 май 2011, 15:38

omvitamin писал(а):Вам на яваскрипт, или на css?
Горизонтальную ориентацию основных категорий, или вертикальную?

Скрипт уже сюда выложили, как раз нужен вертикальный.
Может приделаете за небольшую плату этот скрипт к доске?
benassi
Заслуженный пользователь QPLBoard
 
Сообщения: 72
Зарегистрирован: 18 ноя 2010, 22:15

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

Сообщение hdd » 06 июн 2011, 22:41

А где шаблон работы посмотреть можно?
hdd
Заслуженный пользователь QPLBoard
 
Сообщения: 22
Зарегистрирован: 13 апр 2011, 12:22
Откуда: Оренбург


Вернуться в Вопросы программирования и дизайна

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2