Tutorials
[ Zurück ]


Installation von einem Vertical Menu


Hier mal eine kleine Anleitung für das einbinden von einem Vertical 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>Untitled Document</title>


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


  <style type="text/css">
#v_mnu_01 ul {
list-style: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-decoration: none;
}
#v_mnu_01 {
width: 200px;
margin: 10px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FF0000;
border-right-color: #FF0000;
border-bottom-color: #FF0000;
border-left-color: #FF0000;
}
#v_mnu_01 li a {
text-decoration: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #FF0000;
}
#v_mnu_01 .notopbrdr0xNone {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#v_mnu_01 li a:link, #v_mnu_01 li a:visited {
color: #FFFFFF;
display: block;
background-color: #000000;
padding-top: 3px;
padding-right: 0;
padding-bottom: 3px;
padding-left: 10px;
}
#v_mnu_01 li a:hover {
color: #FFFF00;
background: #008000;
padding-top: 3px;
padding-right: 0;
padding-bottom: 3px;
padding-left: 10px;
}
  </style><!--[if IE]>
<style type="text/css" media="screen">
#v_mnu_01 ul,#v_mnu_01 ul li a{ height: 1%}
</style>
<![endif]-->


Ende Menu Teil 1 im HEAD Bereich

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

</head>

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

Anfang Menu Teil 2 im BODY Bereich

<body>
<div id="v_mnu_01">
<ul>
  <li><a href="Link%201">Button 1</a></li>
  <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>
  <li><a href="Link%202">Button 2</a></li>
  <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>
  <li><a href="Link%203">Button 3</a></li>
  <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>
  <li><a href="Link%204">Button 4</a></li>
  <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>
  <li><a href="Link%205">Button 5</a></li>
  <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>
  <li><a href="Link%206">Button 6</a></li>
  <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" class="notopbrdr0xNone">sub-button 6</a></li>
</ul>
</div>
</body>

Ende Menu Teil 2 im BODY Bereich

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

</html>


Erstellt:08.01.10 19:27
Autor: News-Forum

Letzte Änderung:
Geändert von:

Bewertungen:0
Bewertung:

Freigeschaltet: Ja
Views 3015

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

ANZEIGE