Aufklapp Menü ändern
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anklicken
attribut
aufpassen
bereich
blocken
button
denken
display
ende
erzeugen
feld
fenster
frage
gegenfrage
kasten
kategorie
meinung
pixel
sinn
text
-
Hallo...
Ich habe folgendes Script gefunden, um ein aufklapp-menü zu erzeugen.
Meine Frage, Wie kann ich dieses Script umbauen, so das ich förmlich ein ganzes Fenster öffnen kann.
Also das sich öffnende feld etwa eine Größe von 800 x 600 Pixel hat und ich auch mehrere
Links innerhalb des "fenster's" anklicken kann.
Danke schonmal vorweg.
HEAD
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
<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 HEAD
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
</head>
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
Anfang Menu 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 BODY Bereich -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Meinst du ein Popup-Fenster?
Oder einen Kasten innerhalb deiner Seite, der angezeigt werden soll? -
nein weder noch ich meine das das aufklappende menü... (also der bereich welcher den eigentlichen link enthält) nicht 50 x 200 px sondern zB. 500 x 600 Pixel hat und mit html erstellten text enthält... oder auch nur text oder auch nur eine grafik.
-
ich finde aufklappbäre menü`s besser sobald du mehrere SubMenü`s hast besser.
Gegenfrage: warum willst du es im fenster es sieht doch besser aus wenn du des als aufklappbares menü nimmst, sobald du mit der maus auf die kategorie ALLGEMEIN z.B. gehst oder?
Das ist meien Meinung, finde es so besser und auch Userfreundlich .. immer dran denken:
Der User ist doof und will es soo bequem wie möglich haben ;) -
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; }
ich würde meinen bei height, also z.B height:600px
und eventuell noch das attribut width:500px einfügen
würde dann allerdings mit den paddings und margins, line-height etc aufpassen
ich versteh allerdings auch nicht ganz den sinn dahinter ;) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
