WebTechnologie - ukázkové skripty PHP, XHTML, JavaScript, CSS... (c) Scorpions.cz

HOME SKRIPTY
Menu-horizontální, vysunovací
Normální položka
Zobrazeno: 8370

Popis: Menu v horizontální podobě s vysunováním.
Funkčnost: IE 5.5 a vyššie
Hodnocení: ***
Následující kód si vložte mezi tagy <HEAD> a </HEAD>. 

<STYLE type=text/css>#menu {
        BACKGROUND: lightblue; COLOR: black; CURSOR: default; FONT-FAMILY: verdana; FONT-SIZE: 10pt; FONT-WEIGHT: bold
}
#menu .popup {
        BACKGROUND: lightblue; BORDER-BOTTOM: lightblue 12px solid; BORDER-LEFT: lightblue 12px solid; BORDER-RIGHT: lightblue 12px solid; BORDER-TOP: lightblue 12px solid; DISPLAY: none; FONT-FAMILY: verdana; FONT-SIZE: 8px; POSITION: absolute; WIDTH: 160pt
}
#menu P {
        MARGIN-BOTTOM: 0pt; MARGIN-TOP: 0pt
}
A:hover {
        COLOR: red; TEXT-DECORATION: none
}
A {
        COLOR: black; FONT-SIZE:8pt; MARGIN: 5px; TEXT-DECORATION: none
}
UL {
        COLOR: black; FONT-SIZE: 10pt; MARGIN: 5px; TEXT-DECORATION: none
}
LI {
        COLOR: black; FONT-SIZE: 10pt; MARGIN: 5px; TEXT-DECORATION: none
}
P {
        COLOR: black; FONT-SIZE: 10pt; MARGIN: 5px; TEXT-DECORATION: none
}
.over {
        COLOR: red
}
P {
        TEXT-ALIGN: justify; TEXT-INDENT: 0.1in
}
</STYLE>

Následující kód si vložte mezi tagy <BODY> a </BODY>.

<SCRIPT language=JavaScript>
         var curPop = null;
         function clearCurrent() {
            // Hide the pop-up menu that is currently displayed.
            if (null != curPop)
               curPop.style.display = "";
            curPop = null;
         }

         function popup() {
                         clearCurrent();          
            var el = event.srcElement;
            // Display a new menu option.
            if (("P" == el.tagName) &&
                  ("menu" == el.parentElement.parentElement.parentElement.parentElement.id)) {
               // Position and display the pop-up menu.
               var elpop = document.all[el.sourceIndex + 1];
               elpop.style.pixelLeft = el.parentElement.offsetLeft+7;
               elpop.style.pixelTop  = el.offsetTop +
                  document.all.menu.offsetTop+22;
               elpop.style.display = "block";
               curPop = elpop;
            }
            event.cancelBubble = true;
         }

         function highlight() {
                
            // Highlight and popup  the menu options.
            if (null != event.fromElement)
               if ((event.fromElement.tagName == "P") &&
                                  (event.fromElement.parentElement.parentElement.parentElement.parentElement.id == "menu"))
                                  {
                  event.fromElement.className = "";
                      }
            
            if (null != event.toElement)
               if ((event.toElement.tagName == "P") && (event.toElement.parentElement.parentElement.parentElement.parentElement.id == "menu"))
                                {
                                  popup();                                        
                  event.toElement.className = "over";
                                }
         }                
                
      </SCRIPT>

</HEAD>
<BODY onclick=clearCurrent()>
<DIV style="BACKGROUND: lightblue; WIDHT: 100%">
<TABLE border=0 id=menu onclick=popup() onmouseout=highlight(); 
onmouseover=highlight();>
  <TBODY>
  <TR>
    <TD>
      <A href="http://www.vasweb.cz/">Domů</A></TD>
    <TD bgColor=black></TD>
    <TD>
      <P>menu1 </P>
      <DIV class=popup>
      <P><A class=anchor href="http://submenu1/">submenu1</A> 
      <P><A href="http://www.submenu2.cz/">submenu2</A> 
      <P><A href="http://www.submenu3.cz">submenu3</A> 
      </P></DIV></TD>
    <TD bgColor=black></TD>
    <TD>
      <P>menu2</P>
      <DIV class=popup>
      <P><A href="http://submenu1">submenu1</A> 
      <P><A href="http://submenu2">submenu2</A>
          <P><A href="http://submenu3">submenu3</A>
          <P><A href="http://submenu4">submenu4</A>
          
          </P></DIV></TD>
    <TD bgColor=black></TD>
    <TD>
      <P>e-mail</p>
      <DIV class=popup>
          <P><A href="mailto:xxx@xxx.cz">Napište mi</A>
          </p></div>
</P></TD></TR></TBODY></TABLE></DIV>