Выпадающее меню

Тема в разделе "Веб-дизайн", создана пользователем buxtorus, 6 авг 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. buxtorus

    buxtorus Постоялец

    Регистр.:
    14 апр 2009
    Сообщения:
    84
    Симпатии:
    34
    Здравствуйте, необходимо сделать выпадающее меню как на Перейти по ссылке. То есть чтобы при нажатии на пункт, плавно (это важно) выезжали подпункты.
    Видел модуль для DLE, но он выводит все категории сайта, а мне нужно только те, которые я в ручную впишу.
    Выкладывайте любые варианты решений. На ajax, javascript, да хоть на чём. Буду признателен.
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.133
    Симпатии:
    668
    я это юзаю
    http://www.dynamicdrive.com/dynamicindex1/slashdot.htm
     
    buxtorus нравится это.
  3. qweasd1334

    qweasd1334 Читатель

    Заблокирован
    Регистр.:
    5 июл 2009
    Сообщения:
    61
    Симпатии:
    11
    buxtorus нравится это.
  4. SiriusD

    SiriusD

    Регистр.:
    28 июн 2009
    Сообщения:
    198
    Симпатии:
    46
    Вот держи я таким пользуюсь поставил на сайт своей организации!!!
    Все нужные файлы внутри архива!!!
    [​IMG]

    Скачать
     
  5. Deluxo

    Deluxo Создатель

    Регистр.:
    17 май 2008
    Сообщения:
    14
    Симпатии:
    0
    А в чем проблема выдрать с того сайта css и переделать себе ?
     
  6. Wolfdemon

    Wolfdemon Прохожие

    Вот код, замени пункты меню и картинки и всё;)

    Код:
    <DIV id=menuDiv style="DISPLAY: inline">
    <UL id=tmenu0 style="DISPLAY: block; MARGIN-LEFT: 2px">
    <LI><SPAN style="COLOR: #ff4500"><SPAN style="COLOR: #ff4500"><B>Сайт</B></SPAN> </SPAN>
    <UL>
    <LI><A href="----------------">Главная страница</A> 
    <LI><A href="----------------">Гостевая книга</A> 
    <LI><a href="----------------/"><font color="#ff0000"><span class="m">ТОП сайтов</span></font></a>
    <LI><A href="----------------">Форум</A>
    <LI><A href="----------------">Каталог файлов</A>
    <LI><A href="----------------">Хочешь к нам ? <img alt="" src="http://design-studio.at.ua/Iconki/user.gif" align="" border="0"><br></a>
    <LI><A href="----------------">Реклама на сайте</a> 
    <LI><A href="----------------">Обратная связь</a></ul>
    
    <LI><SPAN style="COLOR: #ff4500"><B>Для Веб-мастеров</B></SPAN> 
    <UL>
    <LI><A href="----------------">Стол заказов</A> 
    <LI><A href="----------------">Скрипты</A> 
    <LI><A href="---------------">Photoshop Online</a>
    <LI><A href="----------------">Генератор HTML кода</A>
    <LI><A href="----------------">Заработай на сайте</a> </LI></UL>
    
    <LI><SPAN style="COLOR: #ff4500"><B>Графика</B></SPAN> 
    <UL>
    <LI><A href="----------------">Банеры</A> 
    <LI><A href="----------------">Юзер бары</A> 
    <LI><A href="----------------">Аватары</A> </LI></UL></LI></UL>
    <UL></UL></DIV><NOINDEX><script type="text/javascript">
    function tmenudata0()
    {
     this.animation_jump = 15
     this.animation_delay = 2
     this.imgage_gap = 3
     this.plus_image = "http://real-fc.ucoz.ru/menu/plus.gif"
     this.minus_image = "http://real-fc.ucoz.ru/menu/URLImage-1.png"
     this.pm_width_height = "9,9"
     this.folder_image = ""
     this.document_image = "http://real-fc.ucoz.ru/menu/URLImage-2.png"
     this.icon_width_height = "15,15"
     this.indent = 14; 
     this.use_hand_cursor = true; 
     this.main_item_styles = "text-decoration:none; \
     font-weight:normal; \
     font-family:Arial; \
     font-size:11px; \
     color:#2166bc; \
     padding:2px; "
     this.sub_item_styles = "text-decoration:none; \
     font-weight:normal; \
     font-family:Arial; \
     font-size:11px; \
     color:#2166bc; "
     this.main_container_styles = "padding:0px;"
     this.sub_container_styles = "padding-top:7px; padding-bottom:7px;"
     this.main_link_styles = "color:#0000FF; text-decoration:none;"
     this.main_link_hover_styles = "color:#2166bc; text-decoration:underline;"
     this.sub_link_styles = ""
     this.sub_link_hover_styles = ""
     this.main_expander_hover_styles = "text-decoration:underline;";
     this.sub_expander_hover_styles = "";}
    </script><script type="text/javascript">
    ulm_ie=window.showHelp;ulm_opera=window.opera;ulm_strict=((ulm_ie || ulm_opera)&&(document.compatMode=="CSS1Compat")); ulm_mac=navigator.userAgent.indexOf("Mac")+1;is_animating=false; cc3=new Object();cc4=new Object(); 
    cc0=document.getElementsByTagName("UL");for(mi=0;mi<cc0.length; mi++){if(cc1=cc0[mi].id){if(cc1.indexOf("tmenu")>-1){cc1=cc1.substring(5); cc2=new window["tmenudata"+cc1];cc3["img"+cc1]=new Image();cc3["img"+cc1].src=cc2.plus_image;cc4["img"+cc1]=new Image(); cc4["img"+cc1].src=cc2.minus_image;if(!(ulm_mac && ulm_ie)){t_cc9=cc0[mi].getElementsByTagName("UL");for(mj=0;mj<t_cc9.length; mj++){cc23=document.createElement("DIV");cc23.className="uldivs"; cc23.appendChild(t_cc9[mj].cloneNode(1));t_cc9[mj].parentNode.replaceChild(cc23,t_cc9[mj]); }}cc5(cc0[mi].childNodes,cc1+"_",cc2,cc1);  cc6(cc1,cc2);cc0[mi].style.display="block"; }}};function cc5(cc9,cc10,cc2,cc11){eval("cc8=new Array("+cc2.pm_width_height+")");this.cc7=0;for(this.li=0;this.li<cc9.length; this.li++){if(cc9[this.li].tagName=="LI"){this.level=cc10.split("_").length-1; cc9[this.li].style.cursor="default";this.cc12=false;this.cc13=cc9[this.li].childNodes; for(this.ti=0;this.ti<this.cc13.length;this.ti++){lookfor="DIV"; if(ulm_mac && ulm_ie)lookfor="UL";if(this.cc13[this.ti].tagName==lookfor){this.tfs=this.cc13[this.ti].firstChild;  if(ulm_mac && ulm_ie)this.tfs=this.cc13[this.ti];this.usource=cc3["img"+cc11].src; if((gev=cc9[this.li].getAttribute("expanded"))&&(parseInt(gev))){this.usource=cc4["img"+cc11].src;  }else this.tfs.style.display="none";if(cc2.folder_image){create_images(cc2,cc11,cc2.icon_width_height,cc2.folder_image,cc9[this.li]);  this.ti=this.ti+2;}this.cc14=document.createElement("IMG");this.cc14.setAttribute("width",cc8[0]);  this.cc14.setAttribute("height",cc8[1]);this.cc14.className="plusminus"; this.cc14.src=this.usource;this.cc14.onclick=cc16;this.cc14.onselectstart=function(){return false};  this.cc14.setAttribute("cc2_id",cc11);this.cc15=document.createElement("div"); this.cc15.style.display="inline";this.cc15.style.paddingLeft=cc2.imgage_gap+"px"; cc9[this.li].insertBefore(this.cc15,cc9[this.li].firstChild); cc9[this.li].insertBefore(this.cc14,cc9[this.li].firstChild); this.ti+=2;new cc5(this.tfs.childNodes,cc10+this.cc7+"_",cc2,cc11);this.cc12=1; }else if(this.cc13[this.ti].tagName=="SPAN"){this.cc13[this.ti].onselectstart=function(){return false}; this.cc13[this.ti].onclick=cc16;this.cc13[this.ti].setAttribute("cc2_id",cc11); this.cname="cc24";if(this.level>1)this.cname="cc25";if(this.level> 1)this.cc13[this.ti].onmouseover=function(){this.className="cc25"; };else this.cc13[this.ti].onmouseover=function(){this.className="cc24"; };this.cc13[this.ti].onmouseout=function(){this.className="";}; }}if(!this.cc12){if(cc2.document_image){create_images(cc2,cc11,cc2.icon_width_height,cc2.document_image,cc9[this.li]);  }this.cc15=document.createElement("div");this.cc15.style.display="inline"; if(ulm_ie)this.cc15.style.width=cc2.imgage_gap+cc8[0]+"px";else this.cc15.style.paddingLeft=cc2.imgage_gap+cc8[0]+"px"; cc9[this.li].insertBefore(this.cc15,cc9[this.li].firstChild);}this.cc7++; }}};function create_images(cc2,cc11,iwh,iname,liobj){eval("tary=new Array("+iwh+")");this.cc15=document.createElement("div");this.cc15.style.display="inline"; this.cc15.style.paddingLeft=cc2.imgage_gap+"px";  liobj.insertBefore(this.cc15,liobj.firstChild); this.fi=document.createElement("IMG");this.fi.setAttribute("width",tary[0]); this.fi.setAttribute("height",tary[1]);this.fi.setAttribute("cc2_id",cc11); this.fi.className="plusminus";this.fi.src=iname;this.fi.style.verticalAlign="middle"; this.fi.onclick=cc16;liobj.insertBefore(this.fi,liobj.firstChild); };function cc16(){if(is_animating)return;cc18=this.getAttribute("cc2_id"); cc2=new window["tmenudata"+cc18];cc17=this.parentNode.getElementsByTagName("UL"); if(parseInt(this.parentNode.getAttribute("expanded"))){this.parentNode.setAttribute("expanded",0);  if(ulm_mac && ulm_ie){cc17[0].style.display="none";}else {cc27=cc17[0].parentNode;cc27.style.overflow="hidden";cc26=cc27; cc27.style.height=cc17[0].offsetHeight;cc27.style.position="relative"; cc17[0].style.position="relative";is_animating=1;setTimeout("cc29("+(-cc2.animation_jump)+",false,"+cc2.animation_delay+")",0);  }this.parentNode.firstChild.src=cc3["img"+cc18].src;}else {this.parentNode.setAttribute("expanded",1);if(ulm_mac && ulm_ie){cc17[0].style.display="block";}else {cc27=cc17[0].parentNode;cc27.style.height="1px";cc27.style.overflow="hidden"; cc27.style.position="relative";cc26=cc27;cc17[0].style.position="relative"; cc17[0].style.display="block";cc28=cc17[0].offsetHeight;cc17[0].style.top=-cc28+"px"; is_animating=1;setTimeout("cc29("+cc2.animation_jump+",1,"+cc2.animation_delay+")",0); }this.parentNode.firstChild.src=cc4["img"+cc18].src;}};function cc29(inc,expand,delay){cc26.style.height=(cc26.offsetHeight+inc)+"px"; cc26.firstChild.style.top=(cc26.firstChild.offsetTop+inc)+"px"; if( (expand &&(cc26.offsetHeight<(cc28)))||(!expand &&(cc26.offsetHeight>Math.abs(inc))) )setTimeout("cc29("+inc+","+expand+","+delay+")",delay);else {if(expand){cc26.style.overflow="visible"; if((ulm_ie)||(ulm_opera && !ulm_strict))cc26.style.height="0px";else cc26.style.height="auto";cc26.firstChild.style.top=0+"px";}else {cc26.firstChild.style.display="none"; cc26.style.height="0px";}is_animating=false;}};function cc6(id,cc2){np_refix="#tmenu"+id;cc20="<style type='text/css'>";cc19="";if(ulm_ie)cc19="height:0px;font-size:1px; ";cc20+=np_refix+" {width:100%;"+cc19+"-moz-user-select:none;margin:0px;padding:0px; list-style:none;"+cc2.main_container_styles+"}";cc20+=np_refix+" li{white-space:nowrap; list-style:none;margin:0px;padding:0px;"+cc2.main_item_styles+"}"; cc20+=np_refix+" ul li{"+cc2.sub_item_styles+"}";cc20+=np_refix+" ul{list-style:none;margin:0px;padding:0px;padding-left:"+cc2.indent+"px; "+cc2.sub_container_styles+"}";cc20+=np_refix+" a{"+cc2.main_link_styles+"}";cc20+=np_refix+" a:hover{"+cc2.main_link_hover_styles+"}";cc20+=np_refix+" ul a{"+cc2.sub_link_styles+"}";cc20+=np_refix+" ul a:hover{"+cc2.sub_link_hover_styles+"}";cc20+=".cc24 {"+cc2.main_expander_hover_styles+"}";if(cc2.sub_expander_hover_styles)cc20+=".cc25 {"+cc2.sub_expander_hover_styles+"}"; else cc20+=".cc25 {"+cc2.main_expander_hover_styles+"}";if(cc2.use_hand_cursor)cc20+=np_refix+" li span,.plusminus{cursor:hand; cursor:pointer;}";else cc20+=np_refix+" li span,.plusminus{cursor:default;}";document.write(cc20+"</style> ");}
    </script></NOINDEX>
     
  7. TOLIK111

    TOLIK111 Постоялец

    Регистр.:
    5 фев 2009
    Сообщения:
    146
    Симпатии:
    15
    А проблема в том, что при "выдирании" чаще всего не получается сохранить целостность кода и никакого результата не бывает. А грамотно обработать выдранный или скопированный код не всегда просто.
     
  8. keks71

    keks71 Писатель

    Регистр.:
    3 дек 2008
    Сообщения:
    4
    Симпатии:
    0
    А метод, предложеный Wolfdemon не работает.
    Создаются только пункты меню разного цвета. А выпадающий список, да еще и с задержкой не реализован в этом коде.
     
  9. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    По моему, mdss предложил самый нормальный вариант. Могу выложить конечно свое меню на jQuery, но там намучаетесь с цсс файлами... сам ручался.
     
  10. Eihwaz

    Eihwaz

    Регистр.:
    7 окт 2007
    Сообщения:
    156
    Симпатии:
    54
    Про выдирание вообще жесть, конечно: автору три строчки кода на jQuery нужно — что там выдирать?
    jQuery:
    HTML:
    
    $(document).ready(function(){
        $("div.links_container").hide();
        $("h2.main_level").click(function(){
            $(this).next("div.links_container").toggle(200);
        });
    });
    
    Обратите внимание на toggle(200) — 200 это скорость анимации "выплывания" div'a со ссылками. Чем больше значение, тем медленнее появляется.
    HTML:
    Будем использовать один большой контейнер для всего меню, теги h2 для псевдоссылок первого уровня, и еще один контейнер для списка ссылок, которые нужно показать.
    HTML:
    
    <div class="menu_container">
        <h2 class="main_level links_1">Links 1</h2>
        <div class="links_container">
            <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
            </ul>
        </div>
        <h2 class="main_level links_2">Links 2</h2>
        <div class="links_container">
            <ul>
                <li><a href="#">Link4</a></li>
                <li><a href="#">Link5</a></li>
                <li><a href="#">Link6</a></li>
            </ul>
        </div>
        <h2 class="main_level links_3">Links 3</h2>
        <div class="links_container">
            <ul>
                <li><a href="#">Link7</a></li>
                <li><a href="#">Link8</a></li>
                <li><a href="#">Link9</a></li>
            </ul>
        </div>
    </div>
    
    CSS:
    HTML:
    
    * {
        margin: 0;
        padding: 0;
    }
    body {
        font: 12px Verdana,Arial, Helvetica, sans-serif;
    }
    div.menu_container {
        width: 200px;
        padding: 0px;
    }
    h2.main_level {
        cursor: pointer;
        padding: 5px 10px;
        background-color:#fff;
        margin:1px;
    }
    div.links_container {
        padding: 5px;
        background-color:#F4F4F8;
    }
    div.links_container ul {
        list-style-type: none;
    }
    div.links_container ul li{
        margin-left: 10px;
    }
    
    Можно дополнительно определить стили h2.links_1, h2.links_2, h2.links_3, и назначить им разные фоновые изображения (иконки, например), именно для этого у тега h2 в аттрибуте class указано два стиля.
     
Статус темы:
Закрыта.