Tutorials
[ Zurück ]


Installation von einem Pull-Down Menu


Hier mal eine kleine Anleitung für das einbinden von einem Pull-Down Menu.

Es ist ein Menu mit 6 Button mit je 6 Sub-Button.
So sieht es im Augenblick aus, es kann alles geändert werden. Das Menu ist voll funktions düchtig. Einfach die Links einfügen und die Buttennamen ändern das wars ( Die sind Blau ). Das Menu kann verlängert werden oder gekürzt, einfach im Teil 2 die änderungen umsetzten.




Hier das Fenster wo man alle angaben sehen kann was zu ändern geht.





Hier das gesammte Menu aus einer Seite wo es nur das Menu gibt.

Die Striche begrenzen die Menu Teile 1 + 2, um genau zu sehen wo was hin muß, Sprich in HEAD oder BODY.

Seiten Anfang
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=utf-8">
  <title>Seitenname</title>


Anfang Menu Teil 1 im HEAD Bereich
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<


  <style type="text/css" media="screen">
body{ behavior:url("csshover2.htc"); }
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #0000A0;width:100%; border:solid 1px #004080;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: #0000A0;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #004080; border-left:solid 1px #004080;}
.pd_menu_01 ul li a {color: #FFFFFF;background: #0000A0;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #0000A0; width:1px}
.pd_menu_01 ul li:hover a {background-color:#008000; text-decoration:none; color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#008000; text-decoration:none;color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;} .pd_menu_01 ul li a:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
  </style>

Ende Menu Teil 1 im HEAD Bereich

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

</head>

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

Anfang Menu Teil 2 im BODY Bereich

<body>
<div class="pd_menu_01">
<ul>
  <li><a href="Link%201">Button 1</a>
    <ul>
      <li><a href="link%201">sub-button 1</a></li>
      <li><a href="link%202">sub-button 2</a></li>
      <li><a href="link%203">sub-button 3</a></li>
      <li><a href="link%204">sub-button 4</a></li>
      <li><a href="link%205">sub-button 5</a></li>
      <li><a href="link%206">sub-button 6</a></li>
    </ul>
  </li>
</ul>
<ul>
  <li><a href="Link%202">Button 2</a>
    <ul>
      <li><a href="link%201">sub-button 1</a></li>
      <li><a href="link%202">sub-button 2</a></li>
      <li><a href="link%203">sub-button 3</a></li>
      <li><a href="link%204">sub-button 4</a></li>
      <li><a href="link%205">sub-button 5</a></li>
      <li><a href="link%206">sub-button 6</a></li>
    </ul>
  </li>
</ul>
<ul>
  <li><a href="Link%203">Button 3</a>
    <ul>
      <li><a href="link%201">sub-button 1</a></li>
      <li><a href="link%202">sub-button 2</a></li>
      <li><a href="link%203">sub-button 3</a></li>
      <li><a href="link%204">sub-button 4</a></li>
      <li><a href="link%205">sub-button 5</a></li>
      <li><a href="link%206">sub-button 6</a></li>
    </ul>
  </li>
</ul>
<ul>
  <li><a href="Link%204">Button 4</a>
    <ul>
      <li><a href="link%201">sub-button 1</a></li>
      <li><a href="link%202">sub-button 2</a></li>
      <li><a href="link%203">sub-button 3</a></li>
      <li><a href="link%204">sub-button 4</a></li>
      <li><a href="link%205">sub-button 5</a></li>
      <li><a href="link%206">sub-button 6</a></li>
    </ul>
  </li>
</ul>
<ul>
  <li><a href="Link%205">Button 5</a>
    <ul>
      <li><a href="link%201">sub-button 1</a></li>
      <li><a href="link%202">sub-button 2</a></li>
      <li><a href="link%203">sub-button 3</a></li>
      <li><a href="link%204">sub-button 4</a></li>
      <li><a href="link%205">sub-button 5</a></li>
      <li><a href="link%206">sub-button 6</a></li>
    </ul>
  </li>
</ul>
<ul>
  <li><a href="Link%206">Button 6</a>
    <ul>
      <li><a href="link%201">sub-button 1</a></li>
      <li><a href="link%202">sub-button 2</a></li>
      <li><a href="link%203">sub-button 3</a></li>
      <li><a href="link%204">sub-button 4</a></li>
      <li><a href="link%205">sub-button 5</a></li>
      <li><a href="link%206">sub-button 6</a></li>
    </ul>
  </li>
</ul>
</div>
</body>

Ende Menu Teil 2 im BODY Bereich

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

</html>


Erstellt:08.01.10 19:08
Autor: News-Forum

Letzte Änderung: 08.01.10 19:12
Geändert von: News-Forum

Bewertungen:4
Bewertung: 3.5

Freigeschaltet: Ja
Views 2938

Klicke einfach auf einen Stern!
Wollen Sie wirklich das Tutorial löschen?
Wollen Sie wirklich dieses Tutorial zulassen?
Betreff: Report tutorial [id = 220] !
Absender:
Kommentar:
Wollen Sie wirklich dieses Tutorial zulassen?
Absender:
Kommentar:
Folgende User sind hier gerade aktiv:
-

ANZEIGE