JS - zložité menu? – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Robím si menu ktoré by vyzeralo asi takto:
Button (o rozmeroch: 25 x 25px) umiestnený v ľavom hornom rohu.Po prejdení myšou by sa pomocou JS a jQuery knižnice (plná - celá knižnica ) vynorilo menu,ktoré by nebolo vidieť - proste by neexistovalo dovtedy - dokedy ho nepotrebujem(neviem teraz ako sa to volá; bolo by umiestnené hornej lište o width: 25px; height: 100%;) a potrebujem pomoc s JS:
1.)Po prejetí myškou nad buttonom by vyliezlo menu z horného okraja prehliadača;(plynule)
2.)Po OnMouseOver (po odchode myšky) by sa po určitom intervale skrylo; (plynule)

- mej to menu mej normalne v kodu jako div/ul s position absolute na pozici 0,0 a s display none
- po najeti na to spoustitko dej $("#idmenu").show()
- po odjeti z toho divu dej $("#idmenu").hide()
- to zpozdeni odjeti muzes udelat timerem, ktery znicis v pripade, ze se mys znova objevi nad tim menu

ty vm!...

už som tu zase!...tentokrát nwm kde a ako pokračovať...kod: (126 riadkov)

/*

*JavaScript menu (v. 1.0)

*/



      //(f) mymenu - get id from document and search "MyMenu" Id

function MyMenu(){

          if (MyMenu.isSupported()) 

      {

				MyMenu.initialize();

                 var MyMenu = document.getElementById("mymenu");

      };

      //(f) menuOpt - menu Options (Activate(Onmouseover)/deactivate(OnMouseOut))

function MenuOpt(){

                              //=====================// 

                              //Options for menu(1-7)//

                              //=====================//

        

       var menu1.onactivate = function() { document.getElementById("menu1").className = "hover"; };

			 var menu1.ondeactivate = function() { document.getElementById("menu1").className = ""; };



			 var menu2.onactivate = function() { document.getElementById("menu2").className = "hover"; };

			 var menu2.ondeactivate = function() { document.getElementById("menu2").className = ""; };



			 var menu3.onactivate = function() { document.getElementById("menu3").className = "hover"; };

		   var menu3.ondeactivate = function() { document.getElementById("menu3").className = ""; };



			 var menu4.onactivate = function() { document.getElementById("menu4").className = "hover"; };

			 var menu4.ondeactivate = function() { document.getElementById("menu4").className = ""; };



			 var menu5.onactivate = function() { document.getElementById("menu5").className = "hover"; };

			 var menu5.ondeactivate = function() { document.getElementById("menu5").className = ""; };



			 var menu6.onactivate = function() { document.getElementById("menu6").className = "hover"; };

			 var menu6.ondeactivate = function() { document.getElementById("menu6").className = ""; };



			 var menu7.onactivate = function() { document.getElementById("menu7").className = "hover"; };

			 var menu7.ondeactivate = function() { document.getElementById("menu7").className = ""; };

                      

                   };

     };              

                   

//Menu Settings (CSS & HTML)             



var MyMenu.WaitTime   = 10000;          // time for waiting if will be used OnMouseOver and "Stand By" 

var MyMenu.HideTime   =   550;          // time for waiting if will be used OnMouseOut            

var MyMenu.SlideTime  =  1200;          // time for waiting if will be used OnMouseOut and "Stand By"

var MyMenu.ShadowColr ="#666666";       // color of menus shadow

var MyMenu.ShadowOfft = 2;              // Shadow Offset

var MyMenu.ShadowSize = 3;              // Shadow size under menu

var MyMenu.ShadowPng  ="IMG/shadow.png";// Image what will be used for shadow  

var MyMenu.BgColor    ="#444444";       // Backgroud color will be used if image doesn't exist

var MyMenu.height     = 450px;          // Height of menu

var MyMenu.width      =  25px;          // width of menu

//===============================================

//---------JavaScript Internal properities-------

//===============================================



var MyMenu.reference = {topLeft:1,topRight:2,bottomLeft:3,bottomRight:4};

var MyMenu.direction = {down:1,right:2};

var MyMenu.registry = [];

var MyMenu._maxZ = 100;



//==================================================================================================

//----------------------------------Static methods for explorers------------------------------------

//==================================================================================================

// supporting win ie5+, mac ie5.1+ and gecko >= mozilla 1.0

var NavName = navigator.appName;

var Platform = navigator.platform;

var UsrAgent = navigator.userAgent;

var nan = false;

      

//============================================

//--------Chceck Explorers--------------------    

//============================================    

          

   if (UsrAgent.indexOf("Gecko") > -1 && navigator.productSub >= 20020605) nan = true; // gecko >= moz 1.0

        else if (NavName == "Microsoft Internet Explorer") {

                if (document.getElementById) { // ie5.1+ mac,win

                        if (Platform.indexOf("mac") == 0) {

							nan = /msie (\d(.\d*)?)/.test(UsrAgent) && Number(RegExp.$1) >= 5.1;

						}

						else nan = true;

                }

        }



        return nan;

}

              //

              // call this in onload once menus have been created

              //

      MyMenu.initialize = function() {

        for (var i = 0, menu = null; menu = this.registry[i]; i++) {

                menu.initialize();

        }

                                    };

           //

           // call this in document body to write out menu html

           //

      

      MyMenu.renderAll = function() {

        var MxHtml = [];

        for (var i = 0, menu = null; menu = this.registry[i]; i++) {

                MxHtml[i] = menu.toString();

        }

        document.write(aMenuHtml.join(""));

};

  function ShowMyMenu(){

  

  }

  

          //=============================================================

          //------------------Make Interval set no.1---------------------

          //=============================================================

   

   //var MyMenu.WaitTime   = 10000;          // time for waiting if will be used OnMouseOver and "Stand By" 

   //var MyMenu.HideTime   =   550;          // time for waiting if will be used OnMouseOut            

   //var MyMenu.SlideTime  =  1200;          // time for waiting if will be used OnMouseOut and "Stand By"

  

  

  function firstInterval(){

      var ButtonInterval;

      var Button = document.getElementById("button1").onclick;

      var Button = setInterval("showMyMenu()",750);

      var Ende = clearTimeout("hideMyMenu()");

      if (Button){

      

      };   

  };

Dpc, proc nepouzivas to jQuery? S tim bys to mel na deset - patnact radku kodu.

To CommanderZ : Možná i míň :)

pretože ešte s ním skoro nič nwm =D

No, jQuery je o hodne jednodussi nez JS samotny. Celkove je takove dost podobne prirozenemu jazyku, vetsinou je to tak, ze jednim prikazem opravdu udelas jeden ukon,ne ze pouzijes 10 raku na zmizeni objektu.

A nauc se pouzivat anonymni funkce, to je genialni code-saver i v samotnem JS, v jQuery to samozrejme take plati.

ok...ale co teraz?...poradí mi nekdo?...alebo mám ísť na jpw.cz ?...zive.cz? =D

Nejrychlejsi budes to mit to prepsat do jQuery. Tretina toho kodu jsou kontroly prohlizecu, druha tretina jsou definice menu, coz ve spolupraci s jQuery udelas jako normalni UL tag s LI polozkami, ktery nasledne nakonfigurujes pomoci javascriptu.

takže predsa to NEBUDE tých 10-15 riadkov...ok...ale s tým jQuery potrebujem hlp...lebo mám v tom TROCHU chaos

Když si zajdeš na web jQuery a prohlídneš si torchu dokumentaci a příklady, co tam jsou, tak to musíš časem dát dokupy. Když ti sem někdo vyklopí hotový kód nic se nenaučíš :) Něco zkus a až se dostaneš ke konkrétní komplikaci, tak sem postni kód a my ti řekneme (pokud budeme vědět), kde je chyba a co je potřeba poupravit :)

tú komplikaci vidím už teďka...ako tie jednoduché príklady chápem...ale čím ďalej tým horšie...JS som nikdy nemal rád...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

                    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

  

  <script>



  

  $(document).ready(function(){

    $("#button").click(function () {

      $("#menu").show(1500);

    });    

    var 

    var WaitTime = setInterval(wait,5000);

     

     

   $("#button").click(function(){$("#menu").hide(1500);}); 

   

   function wait(){

     

   } 

  

  });

  </script>

  <style>

  #bg   {  top: 0px; left: 0px; width: 1280px; height: 1024px; margin: 0px; padding: 0px;}

  #menu { background-color: #000000; filter: Alpha(Opacity=30, style=3);-moz-opacity: 0.3; opacity: 0.3; color: #fff; position: absolute; display: none; height: 25px; width: 100%;}

  </style>

</head>

<body>

  <div id="bg">

  <div id="button">V</div>

  <div id="menu">Hiya ...Such interesting text, eh?</div>

  </div>

</body>

</html>

Co na tom nechapes, po tom intervalu (5000) se spusti kod (!), ne pouze funkce. takze jestli chces proste spustit funkci wait, tak tam napises "wait()" - i s temi uvozovkami. kdyz to budes chtit zrusit, tak udelas clearTimeout(WaitTime). A mas tam jedno var navic.

Takove veci ale musis zvladnout odhalit pomoci javascriptove konzole.

jQuery - to je věc.. používám ho měsíc a už mám pocit že umím programovat líp než předtím:-D JS skoro neznám a přitom efekty a jednoduchost jQuery dosahují víc než profesionální úrovně.. Je to asi jediná knihovna která mi sedla..:-)

misia vyriešená!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

  

  <script>

  $(document).ready(function(){

    

    $("#button").mouseover(function () {

      $("p").slideDown(1000);

    });

    

    $("p").mouseout(function wait(){

    var m = setInterval(hide,5000);});

    

    function hide(){

    $("p").slideUp(1000);

    }

    

  });

  </script>

  <style>

  p { background:yellow; }

  </style>

</head>

<body>

  <div id="button">Show it</div>

  <p style="display: none">Hello</p>

</body>

</html>