Pereiti prie turinio

Kaskadinis Meniu

ZaicazZ

Sukūrė ZaicazZ
Programuotojų kampas

 Dalintis Sekėjai 0

Rekomenduojami pranešimai

ZaicazZ

ZaicazZ 13

Sukurta
Sukurta

Pastebejau kad kuo toliau tuo visi iesko kazko kas padetu puslapiams tapti patrauklasniai, gal kaskadinis meniu pavers kam nors tad imsiu ir parasysiu detalu parasyma..

 

[1] – Atsidarykite web editorių.

[2] – Sukurkite Cascademenu.js failą ir jame įrašykite šį scenarijų:

 

  function InitMenu()
  {
 var bar = menuBar.children	 

 for(var i=0;i < bar.length;i++) 
	{
	  var menu=eval(bar[i].menu)
	  menu.style.visibility = "hidden"
	  bar[i].onmouseover = new Function("ShowMenu("+bar[i].id+")")
	  var Items = menu.children
	  for(var j=0; j<Items.length; j++)
		{
		  var menuItem = eval(Items[j].id)

			if(menuItem.menu != null)
			   { 
				menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
				//var tmp = eval(menuItem.id+"_Arrow")
				// tmp.style.pixelLeft = menu.getBoundingClientRect().Right //- tmp.offsetWidth - 15
				FindSubMenu(menuItem.menu)}

			 if(menuItem.cmd != null) 
			   {
			   menuItem.onclick = new Function("Do("+menuItem.id+")") } 

		  menuItem.onmouseover = new Function("highlight("+Items[j].id+")")

		}	

	}  
  }
  function FindSubMenu(subMenu)
  {
	 var menu=eval(subMenu)
	 var Items = menu.children
	  for(var j=0; j<Items.length; j++)
		{
		  menu.style.visibility = "hidden"
		  var menuItem = eval(Items[j].id)


		  if(menuItem.menu!= null)
			 {
				menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
				// var tmp = eval(menuItem.id+"_Arrow")
				//tmp.style.pixelLeft = 35 //menuItem.getBoundingClientRect().right - tmp.offsetWidth - 15
				FindSubMenu(menuItem.menu)
			 }

			 if(menuItem.cmd != null) 
			   {
			   menuItem.onclick = new Function("Do("+menuItem.id+")") } 

		  menuItem.onmouseover = new Function("highlight("+Items[j].id+")")

		}  
  } 
  function ShowMenu(obj)
  {
 HideMenu(menuBar)
 var menu = eval(obj.menu)
 var bar = eval(obj.id)
 bar.className="barOver"
 menu.style.visibility = "visible"
 menu.style.pixelTop =  obj.getBoundingClientRect().top + obj.offsetHeight + Bdy.scrollTop
 menu.style.pixelLeft = obj.getBoundingClientRect().left + Bdy.scrollLeft
  }

  function highlight(obj)
  {
 var PElement = eval(obj.parentElement.id)
 if(PElement.hasChildNodes() == true)
 {  var Elements = PElement.children
   for(var i=0;i<Elements.length;i++)
   {
	  TE = eval(Elements[i].id)
	  TE.className = "menuItem"
   }
  } 
 obj.className="ItemMouseOver"
 window.defaultStatus = obj.title
 ShowSubMenu(obj)
  }

  function Do(obj)
  {
var cmd = eval(obj).cmd	
window.navigate(cmd)

  }

  function HideMenu(obj)
  {
	  if(obj.hasChildNodes()==true)
		  {  
			 var child = obj.children	 

			 for(var j =0;jchild.length;j++)
			  {
				 if (child[j].className=="barOver")
				 {var bar = eval(child[j].id)
				  bar.className="Bar"}

				 if(child[j].menu != null)
				   {
					  var childMenu = eval(child[j].menu)
					  if(childMenu.hasChildNodes()==true) 
						   HideMenu(childMenu)

					   childMenu.style.visibility = "hidden" 
					 }
			  }

		  }
  }
 function ShowSubMenu(obj)
 {
 PMenu = eval(obj.parentElement.id)
  HideMenu(PMenu)
 if(obj.menu != null)
 {
 var menu = eval(obj.menu)
 menu.style.visibility = "visible"
 menu.style.pixelTop =  obj.getBoundingClientRect().top + Bdy.scrollTop
 menu.style.pixelLeft = obj.getBoundingClientRect().right + Bdy.scrollLeft
 if(menu.getBoundingClientRect().right > window.screen.availWidth )
   menu.style.pixelLeft = obj.getBoundingClientRect().left - menu.offsetWidth
}
 } 
///////////////////CascadedDropdown Menu/////////////////
//Date : 08/09/2001			   						//
//Version : 1.0										//
//Author Mr.Arun N Kumar								//
//EMail: [email protected]							//		
/////////////////////////////////////////////////////////
// Modifications on this code is not recomended
// Suggestions are welcome

 

[3] – Sukurkite failą Cascademenu.css ir jame parašykite:

 


  BODY
{
}
.menuBar
{
POSITION: relative;
BACKGROUND-COLOR: transparent;
TEXT-ALIGN: center
}
.Bar
{
BORDER-RIGHT: blue 1px outset;
BORDER-TOP: blue 1px outset;
FLOAT: left;
BORDER-LEFT: blue 1px outset;
WIDTH: 100px;
CURSOR: hand;
TEXT-INDENT: 5px;
BORDER-BOTTOM: blue 1px outset;
POSITION: relative;
BACKGROUND-COLOR: deepskyblue;
TEXT-ALIGN: center
}
.menu
{
BORDER-RIGHT: buttonhighlight thin outset;
BORDER-TOP: buttonhighlight thin outset;
VISIBILITY: hidden;
BORDER-LEFT: buttonhighlight thin outset;
WIDTH: 150px;
LINE-HEIGHT: 140%;
BORDER-BOTTOM: buttonhighlight thin outset;
POSITION: absolute;
BACKGROUND-COLOR: deepskyblue
}
.menuItem
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid
}
.ItemMouseOver
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
COLOR: highlighttext;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid;
BACKGROUND-COLOR: highlight
}
.ItemMouseOut
{
WIDTH: 100%
}
.Arrow
{
FLOAT: right;
FONT-FAMILY: Webdings;
POSITION: absolute;
TEXT-ALIGN: left
}
.barOver
{
BORDER-RIGHT: blue 1px ridge;
BORDER-TOP: blue 1px ridge;
FLOAT: left;
BORDER-LEFT: blue 1px ridge;
WIDTH: 100px;
CURSOR: hand;
TEXT-INDENT: 5px;
BORDER-BOTTOM: blue 1px ridge;
POSITION: relative;
BACKGROUND-COLOR: deepskyblue;
TEXT-ALIGN: center
}

 

[4] – Sukurkite index.html failą ir jame įrašykite:

 


<html>
<head>
<link href="CascadeMenu.css" rel="stylesheet">
<script language="javascript" src="CascadeMenu.js">
</script>
</head>
<BODY OnLoad="InitMenu()" Onclick="HideMenu(menuBar)" ID="Bdy" bgColor=aliceblue>
<font color="#800080"><b>Sample Menu</b></font></p>
<DIV Id="menuBar" class="menuBar" > 
 <DIV Id="Bar1" class="Bar" menu="menu1">Menu #1</DIV>
 <DIV Id="Bar2" class="Bar" menu="menu2">Menu #2</DIV>
 <DIV Id="Bar3" class="Bar" menu="menu3">Menu #3</DIV>
 <DIV Id="Bar4" class="Bar" menu="menu4">Menu #4</DIV>
</DIV>
<!--MenuItem Definition -->
<div Id="menu1" class="menu" >
<div Id="menuItem1_1" class="menuItem" menu="menu6">SubMenu #1</div>
<div Id="menuItem1_2" class="menuItem" title="JavaScripts" cmd="http://javascript.internet.com/">JavaScript Source</div>
<div Id="menuItem1_3" class="menuItem" title="WDVL" cmd="http://www.wdvl.com">WDVL</div>
</div>
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem">Page #1</div>
<div Id="menuItem2_2" class="menuItem">Page #2</div>
<div Id="menuItem2_3" class="menuItem">Page #3</div>
</div>
<div Id="menu3" class="menu">
<div Id="menuItem3_1" class="menuItem">Page #1</div>
<div Id="menuItem3_2" class="menuItem">Page #2</div>
<div Id="menuItem3_3" class="menuItem">Page #3</div>
<div Id="menuItem3_4" class="menuItem" menu="menu5">SubMenu #4</div>
</div>
<div Id="menu4" class="menu">
<div Id="menuItem4_1" class="menuItem">Page #1</div>
<div Id="menuItem4_2" class="menuItem">Page #2</div>
<div Id="menuItem4_3" class="menuItem">Page #3</div>
<div Id="menuItem4_4" class="menuItem">Page #4</div>
</div>
<div id="menu5" class="menu">
<div Id="menuItem5_1" class="menuItem">Page #4-1</div>
<div Id="menuItem5_2" class="menuItem">Page #4-2</div>
<div Id="menuItem5_3" class="menuItem">Page #4-3</div>
</div>
<div id="menu6" class="menu">
<div Id="menuItem6_1" class="menuItem">Page #1-1</div>
<div Id="menuItem6_2" class="menuItem">Page #1-2</div>
<div Id="menuItem6_3" class="menuItem" menu="menu7">SubMenu #1-1</div>
</div>
<div id="menu7" class="menu">
<div Id="menuItem7_1" class="menuItem">Page #1-1-1</div>
<div Id="menuItem7_2" class="menuItem">Page #1-1-2</div>
<div Id="menuItem7_3" class="menuItem">Page #1-1-3</div>
</div><!-- End of Menu -->
<p>

 

Jei kas nesigavo eikite i:

 

http://javascript.internet.com/navigation/cascade-menu.html

 

sekmes

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Kernius

Kernius 8.356

Atrašyta
Atrašyta

Aš išvis stengiuosi vengti javascript. Tai netik apkrauna tinklapį, bet ir gali neveikt kai kuriems lankytojams. Kita vertus, javascript gerokai padidina tinklapio galimybes ir didžiausi interneto portalai (pvz. yahoo.com) jo nevengia naudot. Vis dėl to, manau, kad, jei gali nenaudot javascript (t.y. pakeist jį kuo nors kitu), tai ir nenaudok. Meniu atžvilgiu, kaip jau daug kas minėjo, CSS yra puiki alternatyva.

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
×
 Dalintis
Sekėjai 0
Eiti į temų sąrašą

  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

  • Prisijunk prie bendruomenės dabar!

    Uždarbis.lt nariai domisi verslo, IT ir asmeninio tobulėjimo temomis, kartu sprendžia problemas, dalinasi žiniomis ir idėjomis, sutinka būsimus verslo partnerius ir dalyvauja gyvuose susitikimuose.

    Užsiregistruok dabar ir galėsi:

    ✔️ Dalyvauti diskusijose;

    ✔️ Kurti naujas temas;

    ✔️ Rašyti atsakymus;

    ✔️ Vertinti kitų žmonių pranešimus;

    ✔️ Susisiekti su bet kuriuo nariu asmeniškai;

    ✔️ Naudotis tamsia dizaino versija;

    ir dar daugiau.

    Registracija trunka ~30 sek. ir yra visiškai nemokama.

  • Naujausios temos

  • Karštos temos

×
×
  • Pasirinkite naujai kuriamo turinio tipą...