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

75

Кристина

26 июня 2006, 12:35

1159

Есть товар. Как создать систему сортировки в раскрывающемся меню? может есть скрпты какие или ссылки на то как то сделать средствами html?

AM

57

Arty.M

26 июня 2006, 13:01

#1

делать это средствами только html - изврат

загружайте список уже упорядоченным...

если есть желание поиздеваться над собой то упорядочивание с помощью javascript Вам поможет

а лучше напишите подробнее что Вам необходимо... ничего не понятно пока из Ваших слов

Дикая экономика на конкретном Яндекс цепляет в конец Добавьте налоговую информацию

75

Кристина

26 июня 2006, 13:10

#2

Arty.M:
делать это средствами только html - изврат
загружайте список уже упорядоченным...

если есть желание поиздеваться над собой то упорядочивание с помощью javascript Вам поможет

а лучше напишите подробнее что Вам необходимо... ничего не понятно пока из Ваших слов

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

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие

A

111

azzz

26 июня 2006, 13:15

#3

и в чем проблема тогда?

342

Jackyk

26 июня 2006, 13:31

#4

Кристина, возможно, Вам поможет программа Macromedia Fireworks. Там есть визуальный редактор для создания таких выпадающих меню.

С уважением, Евгений.

27

Fuzzy

26 июня 2006, 13:49

#5

Кристина:
Есть товар. Как создать систему сортировки в раскрывающемся меню? может есть скрпты какие или ссылки на то как то сделать средствами html?

Может быть Вам поможет что-то отсюда:

http://www.dynamicdrive.com/dynamicindex1/index.html

http://www.dynamicdrive.com/dynamicindex1/indexb.html

MODx - бесплатная профессиональная среда разработки (CMF) и система управления сайтом (CMS) http://modx.ru (http://modx.ru) | http://modx.com/ (http://modx.com/)

188

DJ_Petrovich

26 июня 2006, 15:09

#6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<title>Horizontal Drop Down Menus</title> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<script type="text/javascript"> 

<!-- 

startList = function() { 

   if (document.all&&document.getElementById) { 

      navRoot = document.getElementById("nav"); 

      navRoot1 = document.getElementById("nav1"); 

      navRoot2 = document.getElementById("nav2"); 

      navRoot3 = document.getElementById("nav3"); 

      navRoot4 = document.getElementById("nav4"); 

      for (var i=0; i<navRoot.childNodes.length; i++) { 

         node = navRoot.childNodes; 

         if (node.nodeName=="LI") { 

            node.onmouseover=function(){ 

               this.className+=" over"; 

            } 

            node.onmouseout=function() { 

               this.className=this.className.replace(" over", ""); 

            } 

         } 

      } 

      for (var i=0; i<navRoot1.childNodes.length; i++) { 

         node1 = navRoot1.childNodes; 

         if (node1.nodeName=="LI") { 

            node1.onmouseover=function(){ 

               this.className+=" over"; 

            } 

            node1.onmouseout=function() { 

               this.className=this.className.replace(" over", ""); 

            } 

         } 

      } 

      for (var i=0; i<navRoot2.childNodes.length; i++) { 

         node2 = navRoot2.childNodes; 

         if (node2.nodeName=="LI") { 

            node2.onmouseover=function(){ 

               this.className+=" over"; 

            } 

            node2.onmouseout=function() { 

               this.className=this.className.replace(" over", ""); 

            } 

         } 

      } 

      for (var i=0; i<navRoot3.childNodes.length; i++) { 

         node3 = navRoot3.childNodes; 

         if (node3.nodeName=="LI") { 

            node3.onmouseover=function(){ 

               this.className+=" over"; 

            } 

            node3.onmouseout=function() { 

               this.className=this.className.replace(" over", ""); 

            } 

         } 

      } 

      for (var i=0; i<navRoot4.childNodes.length; i++) { 

         node4 = navRoot4.childNodes; 

         if (node4.nodeName=="LI") { 

            node4.onmouseover=function(){ 

               this.className+=" over"; 

            } 

            node4.onmouseout=function() { 

               this.className=this.className.replace(" over", ""); 

            } 

         } 

      } 

   } 

} 

window.onload=startList; 

--> 

</script> 

<style type="text/css"> 

<!-- 

body { 

   font: normal 11px verdana; 

   } 



ul { 

   margin: 0; 

   padding: 0; 

   list-style: none; 

   width:152px; /* Width of Menu Items */ 

   border-bottom: 1px solid #ccc; 

   } 

ul li { 

   position: relative; 

   width:152px; 

   } 

    

li ul { 

   position: absolute; 

   left: 0; /* Set 1px less than menu width */ 

   top:23px; 

   display: none; 

   } 



/* Styles for Menu Items */ 

ul li a { 

   display: block; 

   text-decoration: none; 

   color: #777; 

   background: #fff; /* IE6 Bug */ 

   padding: 5px; 

   border: 1px solid #ccc; 

   border-bottom: 0; 

   } 



/* Fix IE. Hide from IE Mac \*/ 

* html ul li { float: left; height: 1%; } 

* html ul li a { height: 1%; } 

/* End */ 



ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */ 

       

li ul li a { padding: 2px 5px; } /* Sub Menu Styles */ 

       

li:hover ul, li.over ul { display: block; } /* The magic */ 







/*temp temp temp temp*/ 



#hor_nav { 

   width:760px; 

   margin:auto; 

   background-color:#F6F6F6; 

   /*border-bottom:1px solid #ccc; 

   border-right:1px solid #ccc; 

   border-left:1px solid #ccc;*/ 

} 

.sections { 

   width:152px; 

   padding:8px 0 0 0; 

   /*border-right:1px solid #ccc;*/ 

   float:left; 

   font-weight:600; 

   font-size:10px; 

} 

.sections a:hover { 

   text-decoration:none; 

} 

.sections_right { 

   width:152px; 

   float:left; 

   padding:8px 0 0 0; 

   font-weight:600; 

   font-size:10px; 

} 

.sections_right a:hover { 

   text-decoration:none; 

} 

--> 

</style> 

</head> 

<p>&nbsp;</p> 

<p>&nbsp;</p> 

<div id="hor_nav"> 

 <div class="sections"> 

  <ul id="nav"> 

   <li><a href="#">About1</a> 

    <ul> 

     <li><a href="#">History</a></li> 

     <li><a href="#">Team</a></li> 

     <li><a href="#">Offices</a></li> 

    </ul> 

   </li> 

  </ul> 

 </div> 

 <div class="sections"> 

  <ul id="nav1"> 

 <li><a href="#">About2</a> 

  <ul> 

   <li><a href="#">History</a></li> 

   <li><a href="#">Team</a></li> 

   <li><a href="#">Offices</a></li> 

   <li><a href="#">wfsdfsd</a></li> 

   <li><a href="#">Team</a></li> 

  </ul> 

 </li> 

</ul> 

 </div> 

 <div class="sections"> 

  <ul id="nav2"> 

 <li><a href="#">About3</a> 

  <ul> 

   <li><a href="#">Offices</a></li>  

  </ul> 

 </li> 

</ul> 

 </div> 

 <div class="sections"> 

  <ul id="nav3"> 

 <li><a href="#">About4</a> 

  <ul> 

   <li><a href="#">History</a></li> 

   <li><a href="#">Team</a></li> 

   <li><a href="#">Offices</a></li> 

   <li><a href="#">History</a></li> 

   <li><a href="#">Team</a></li> 

   <li><a href="#">Offices</a></li> 

  </ul> 

 </li> 

</ul> 

 </div> 

 <div class="sections_right"> 

  <ul id="nav4"> 

 <li><a href="#">About5</a> 

  <ul> 

   <li><a href="#">History</a></li> 

   <li><a href="#">Team</a></li> 

   <li><a href="#">Offices</a></li> 

  </ul> 

 </li> 

</ul> 

 </div> 

</div> 

</body> 

</html>

средствами HTML и CSS

немножко :) явы чтоб безглючно работало в ие

в опере работает без нее

в других не проверял

Тонны одноцентового трафика из Директа для ваших сайтов. Настройка - бесплатно! (/ru/forum/779616) Лендинг + Реклама в Яндекс.Директ за 15 минут! (/ru/forum/comment/16213883)

75

Кристина

26 июня 2006, 15:55

#7

DJ_Petrovich:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<title>Horizontal Drop Down Menus</title> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<script type="text/javascript"> 

<!-- 

startList = function() { 

   if (document.all&&document.getElementById) { 

      navRoot = document.getElementById("nav"); 

      navRoot1 = document.getElementById("nav1"); 

      navRoot2 = document.getElementById("nav2"); 

      navRoot3 = document.getElementById("nav3"); 

      navRoot4 = document.getElementById("nav4"); 

      for (var i=0; i<navRoot.childNodes.length; i++) { 

         node = navRoot.childNodes; 

         if (node.nodeName=="LI") { 

            node.onmouseover=function(){ 

               this.className+=" over"; 

            } 

            node.onmouseout=function() { 

               this.className=this.className.replace(" over", ""); 

            } 

         } 

      } 

      for (var i=0; i<navRoot1.childNodes.length; i++) { 

         node1 = navRoot1.childNodes; 

         if (node1.nodeName=="LI") { 

            node1.onmouseover=function(){ 

               this.className+=" over"; 

            } 

            node1.onmouseout=function() { 

               this.className=this.className.replace(" over", ""); 

            } 

         } 

      } 

      for (var i=0; i<navRoot2.childNodes.length; i++) { 

         node2 = navRoot2.childNodes; 

         if (node2.nodeName=="LI") { 

            node2.onmouseover=function(){ 

               this.className+=" over"; 

            } 

            node2.onmouseout=function() { 

               this.className=this.className.replace(" over", ""); 

            } 

         } 

      } 

      for (var i=0; i<navRoot3.childNodes.length; i++) { 

         node3 = navRoot3.childNodes; 

         if (node3.nodeName=="LI") { 

            node3.onmouseover=function(){ 

               this.className+=" over"; 

            } 

            node3.onmouseout=function() { 

               this.className=this.className.replace(" over", ""); 

            } 

         } 

      } 

      for (var i=0; i<navRoot4.childNodes.length; i++) { 

         node4 = navRoot4.childNodes; 

         if (node4.nodeName=="LI") { 

            node4.onmouseover=function(){ 

               this.className+=" over"; 

            } 

            node4.onmouseout=function() { 

               this.className=this.className.replace(" over", ""); 

            } 

         } 

      } 

   } 

} 

window.onload=startList; 

--> 

</script> 

<style type="text/css"> 

<!-- 

body { 

   font: normal 11px verdana; 

   } 



ul { 

   margin: 0; 

   padding: 0; 

   list-style: none; 

   width:152px; /* Width of Menu Items */ 

   border-bottom: 1px solid #ccc; 

   } 

ul li { 

   position: relative; 

   width:152px; 

   } 

    

li ul { 

   position: absolute; 

   left: 0; /* Set 1px less than menu width */ 

   top:23px; 

   display: none; 

   } 



/* Styles for Menu Items */ 

ul li a { 

   display: block; 

   text-decoration: none; 

   color: #777; 

   background: #fff; /* IE6 Bug */ 

   padding: 5px; 

   border: 1px solid #ccc; 

   border-bottom: 0; 

   } 



/* Fix IE. Hide from IE Mac \*/ 

* html ul li { float: left; height: 1%; } 

* html ul li a { height: 1%; } 

/* End */ 



ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */ 

       

li ul li a { padding: 2px 5px; } /* Sub Menu Styles */ 

       

li:hover ul, li.over ul { display: block; } /* The magic */ 







/*temp temp temp temp*/ 



#hor_nav { 

   width:760px; 

   margin:auto; 

   background-color:#F6F6F6; 

   /*border-bottom:1px solid #ccc; 

   border-right:1px solid #ccc; 

   border-left:1px solid #ccc;*/ 

} 

.sections { 

   width:152px; 

   padding:8px 0 0 0; 

   /*border-right:1px solid #ccc;*/ 

   float:left; 

   font-weight:600; 

   font-size:10px; 

} 

.sections a:hover { 

   text-decoration:none; 

} 

.sections_right { 

   width:152px; 

   float:left; 

   padding:8px 0 0 0; 

   font-weight:600; 

   font-size:10px; 

} 

.sections_right a:hover { 

   text-decoration:none; 

} 

--> 

</style> 

</head> 

<p>&nbsp;</p> 

<p>&nbsp;</p> 

<div id="hor_nav"> 

 <div class="sections"> 

  <ul id="nav"> 

   <li><a href="#">About1</a> 

    <ul> 

     <li><a href="#">History</a></li> 

     <li><a href="#">Team</a></li> 

     <li><a href="#">Offices</a></li> 

    </ul> 

   </li> 

  </ul> 

 </div> 

 <div class="sections"> 

  <ul id="nav1"> 

 <li><a href="#">About2</a> 

  <ul> 

   <li><a href="#">History</a></li> 

   <li><a href="#">Team</a></li> 

   <li><a href="#">Offices</a></li> 

   <li><a href="#">wfsdfsd</a></li> 

   <li><a href="#">Team</a></li> 

  </ul> 

 </li> 

</ul> 

 </div> 

 <div class="sections"> 

  <ul id="nav2"> 

 <li><a href="#">About3</a> 

  <ul> 

   <li><a href="#">Offices</a></li>  

  </ul> 

 </li> 

</ul> 

 </div> 

 <div class="sections"> 

  <ul id="nav3"> 

 <li><a href="#">About4</a> 

  <ul> 

   <li><a href="#">History</a></li> 

   <li><a href="#">Team</a></li> 

   <li><a href="#">Offices</a></li> 

   <li><a href="#">History</a></li> 

   <li><a href="#">Team</a></li> 

   <li><a href="#">Offices</a></li> 

  </ul> 

 </li> 

</ul> 

 </div> 

 <div class="sections_right"> 

  <ul id="nav4"> 

 <li><a href="#">About5</a> 

  <ul> 

   <li><a href="#">History</a></li> 

   <li><a href="#">Team</a></li> 

   <li><a href="#">Offices</a></li> 

  </ul> 

 </li> 

</ul> 

 </div> 

</div> 

</body> 

</html>

средствами HTML и CSS
немножко :) явы чтоб безглючно работало в ие
в опере работает без нее
в других не проверял

СПАСИБО ОГРОМНОЕ!!!!!!!!!!!!!!!!!!!!!!!!!!!! ТО ЧТО НУЖНО!!!:) :) :) :) :)

171

filosof

26 июня 2006, 16:06

#8

http://www.artlebedev.ru/tools/technogrette/html/treeview/

В 2023 году 36,9% всех DDoS-атак пришлось на сферу финансов

Что делать, чтобы попасть в ответы Google Bard