Navigation Untermenü

yobas

Tag allerseits.

Habe eine frage zu Untermenüs, und zwar wie funktioniert das genau?
denn heute hab ich eine Internet seite gesichtet ( designnation.de ) was ich genau meine sind diese Navigationsleisten bei Hauptmenü.
Kenne mich momentan nur mit <ul><li></li></ul> und <span></span> aus.

( designnation.de html code )

Code

<div class="box">




          <h3><img src="/Theme/Default/Grafiken/haupt_navi.gif" alt="Hauptnavigation" /> Hauptmenü</h3>
          	<ul>
              	<li style="margin-bottom: 10px;"><a href="http://tutorials.designnation.de/">Übersicht</a></li>

        <li style="line-height: 25px;background-image: url(http://www.designnation.de/Grafiken/tut/1.gif);" class="active"><a href="http://tutorials.designnation.de/Adobe-Photoshop/">Adobe Photoshop	</a> <span class="anzahl">388</span></li>        		<li style="margin-left: 15px;" class="sub"><a href="http://tutorials.designnation.de/Adobe-Photoshop/Bildmanipulation/">Bildmanipulation</a> <span class="anzahl">20</span></li>




                    		<li style="margin-left: 15px;" class="sub"><a href="http://tutorials.designnation.de/Adobe-Photoshop/Buttons/">Buttons</a> <span class="anzahl">11</span></li>
                    		<li style="margin-left: 15px;" class="sub"><a href="http://tutorials.designnation.de/Adobe-Photoshop/Grundlagen/">Grundlagen</a> <span class="anzahl">10</span></li>
                    		<li style="margin-left: 15px;" class="sub"><a href="http://tutorials.designnation.de/Adobe-Photoshop/Interface/">Interface</a> <span class="anzahl">3</span></li>
                    		<li style="margin-left: 15px;" class="sub"><a href="http://tutorials.designnation.de/Adobe-Photoshop/Objekte/">Objekte</a> <span class="anzahl">-1</span></li>




                    		<li style="margin-left: 15px;" class="sub"><a href="http://tutorials.designnation.de/Adobe-Photoshop/Text/">Text</a> <span class="anzahl">22</span></li>
                    		<li style="margin-left: 15px;" class="sub"><a href="http://tutorials.designnation.de/Adobe-Photoshop/Texturen/">Texturen</a> <span class="anzahl">8</span></li>
                        		<li style="margin-top: 10px; margin-bottom: 10px;margin-left: 15px;" class="sub"><a href="http://tutorials.designnation.de/Adobe-Photoshop/Sonstiges/">Sonstiges</a> <span class="anzahl"></span></li>

        	<li style="line-height: 25px;background-image: url(http://www.designnation.de/Grafiken/tut/5.gif);"><a href="http://tutorials.designnation.de/Cinema-4D/">Cinema 4D	</a> <span class="anzahl">130</span></li><li style="line-height: 25px;background-image: url(http://www.designnation.de/Grafiken/tut/6.gif);"><a href="http://tutorials.designnation.de/3D-Studio-Max/">3D Studio Max	</a> <span class="anzahl">1</span></li><li style="line-height: 25px;background-image: url(http://www.designnation.de/Grafiken/tut/7.gif);"><a href="http://tutorials.designnation.de/XHTML-CSS/">(X)HTML / CSS	</a> <span class="anzahl">64</span></li><li style="line-height: 25px;background-image: url(http://www.designnation.de/Grafiken/tut/7.gif);"><a href="http://tutorials.designnation.de/PHP-MySQL/">PHP / MySQL	</a> <span class="anzahl">81</span></li><li style="line-height: 25px;background-image: url(http://www.designnation.de/Grafiken/tut/7.gif);"><a href="http://tutorials.designnation.de/Ajax-Javascript/">Ajax / Javascript	</a> <span class="anzahl">11</span></li><li style="line-height: 25px;background-image: url(http://www.designnation.de/Grafiken/tut/8.gif);"><a href="http://tutorials.designnation.de/Fotofrafie/">Fotografie	</a> <span class="anzahl">10</span></li><li style="line-height: 25px;background-image: url(http://www.designnation.de/Grafiken/tut/9.gif);"><a href="http://tutorials.designnation.de/Bildung/">Bildung	</a> <span class="anzahl">-2</span></li><li style="line-height: 25px;background-image: url(http://www.designnation.de/Grafiken/tut/0.gif);"><a href="http://tutorials.designnation.de/Sonstiges/">Sonstiges	</a> <span class="anzahl">98</span></li>               
 
             </ul>




        </div>

Alles anzeigen

Was ich noch fragen wollte ist, kann man Tags anordnen wie eine Navigation? sprich das man in der Navigations List A Tags einfügen kann z.b wenn jemand bei mir ein ( Inserat, nenn ich das mal ) erstellt, das dass dann in der Navigation dargestellt wird? und das man dann bei der Navigations list A eine aufzählung bekommen kann? so wie bei designnation.de nur das es voll automatisch gemacht wird?

webmaster3000

Hallo!

Ein System, in dem registriere Nutzer Inhalte hinzufügen können. kann man mit PHP erstellen.

Verschachtelte Listen sehen so aus:

Code

<ul>
    <li>Listenpunkt 1. Ordnung
         <ul>
               <li>Listenpunkt 2. Ordnung</li>
         </ul>
    </li>
</ul>

Hofe, ich konnte helfen,
webmaster3000

yobas

Danke für die Antwort

jetzt wüsste ich wie man Untere Menüs erstellt, aber noch nicht wie man die Verstecken kann.
Möchte gerne Wissen wie man die per Click Hervorruft wie bei Designnation.de.

Danke für die Antwort

Liebe Grüsse Yobas
(Peace)

lauras

In dem man sie einfach auf der Hauptseite nicht in den Quellcode schreibt und auf der Unterseite schon? Wahlweise auch per Javascript.
Wie wäre es denn, wenn du bevor du fragen stellst einfach mal in den Code dieser betreffenden Website schaust? Dann sollte dir nämlich einiges deutlicher werden und wir müssen nicht erklären, was eigentlich schon im Code drin steht

yobas

habe versucht den code zu verstehen aber verstehe ihn glaub ich noch nicht ( beschämtes lächeln )

Sarkkan

Das ist doch nicht schlimm
Du bist noch am Anfang, dass kommt noch :wink: Außerdem denke ich wirst du noch keine Erfahrungen mit JavaScript gemacht haben, also nur halb so schlimm

Versuch es aber dann erst mal ohne diesen Effekt. Wir (/Ich) geben ungerne kompletten Code heraus, sondern wollen meistens eigentlich nur Denkansätze liefern.
Nur wenn es unbedingt notwendig sein sollte und du gaaaanz nett fragen würdest, könnte man da mal verhandenln^^

SilverScripting

Hi yobas,

es gibt - neben den bereits genannten Effekten (Javascript etc.) - auch noch die Möglichkeit mittels CSS solche Layouts zu schreiben. Ich würde Dir empfehlen mal nach "CSS-basierte Layouts" googlen. Vielleicht hilft Dir das bei Deinem Verständnis weiter

LG vom Löwen

lauras

Öhm.. ich gehe eigentlich davon aus, dass er CSS benutzt (was eigentlich selbstverständlich sein sollte). Aber über CSS gibt es nur schwer die Möglichkeit, etwas per "Klick" einzublenden - dazu braucht man dann entweder unterschiedlichen Code auf beiden Seiten (was für den Anfang denke ich empfehlenswert ist) oder Javascript.. Wie genau soll ihm da die Suche nach "CSS-basierte Layouts" weiterhelfen?

Grüße

SilverScripting

Guten Morgen Lauras,

da ich yobas Ausgangspost der Art verstanden habe, dass er Verständnisschwierigkeiten hat, habe ich ihm diese Google Suche empfohlen, weil es dort in den Suchergebnissen einen Artikel gibt, der sehr leicht zu verstehen ist (nach diesem Tutorial habe ich meine - momentan offline befindende - Seite auch mit einer Nav-Leiste versehen.)

Dort erhält er Schritt für Schritt erklärt wie sich so eine Nav-Leiste aufbaut. Angefangen von verschachtelten <li> über den dazugehörigen CSS-Code zum nachbauen.

LG vom Löwen

lauras

Dann gib ihm doch den Link zum Artikel?^^

SilverScripting

Zitat von "lauras"

Dann gib ihm doch den Link zum Artikel?^^

Sehr gerne:

1.) http://de.selfhtml.org/css/layouts/einfuehrung.htm
2.) http://de.selfhtml.org/css/layouts/mehrspaltige.htm
3.) http://de.selfhtml.org/css/layouts/na….htm#definieren

Zu 1.) eine grundlegende Einführung in CSS-Layout
Zu 2.) Positionierung von CSS - Layouts an Hand eines drei-Spaltigen Layouts
Zu 3.) die eigentliche Antwort auf yobas Frage die nach der Lektüre der beiden Links vorher sehr einfach nachzubauen ist.

LG vom Löwen

yobas

Guten Tag allerseits.
Danke für die Tollen Antworten!

Möchte euch noch sagen das ich die Navigationlisten mit CSS verstanden habe, jedoch nicht die mti den zusätzlichen Ebenen. das sollte sich in kürze ändern da ich so eine tollen Link erhalten habe, sprich wurde hier rein gepostet.

mein momentaner Beispiel Navigation ( der später mal in der Homepage vorkommt. HINWEIS diese A,B bis C Beschreibung, ist nur ein beispiel )

Code

</div> 




	<ul>




	<li><a href="#">Alle</a></li>
	<li><a href="#">A </a></li>
	<li><a href="#">B</a></li>




	<li><a href="#">C</a></li>
	<li><a href="#">D</a></li>
	<li><a href="#">E</a></li>




	<li><a href="#">F</a></li>
	<li><a href="#">G</a></li>
	<li><a href="#">H</a></li>




	<li><a href="#">I</a></li>
	<li><a href="#">J</a></li>
	<li><a href="#">K</a></li>




	<li><a href="#">L</a></li>
	<li><a href="#">M</a></li>
	<li><a href="#">N</a></li>




	<li><a href="#">O</a></li>
	<li><a href="#">P</a></li>
	<li><a href="#">Q</a></li>




	<li><a href="#">R</a></li>
	<li><a href="#">S</a></li>
	<li><a href="#">T</a></li>




	<li><a href="#">U</a></li>
	<li><a href="#">V</a></li>
	<li><a href="#">W</a></li>




	<li><a href="#">X</a></li>
	<li><a href="#">Y</a></li>
    <li><a href="#">Z</a></li>





	</ul>




		</div>

Alles anzeigen

Code

CSS




#Navigation li {







	list-style-type: none;
	display: inline;
	float: left;
	font-size: 13px;




			}




#Navigation a, #Navigation strong {




		text-decoration: none;
		letter-spacing: 1px;
		display: block;
		padding: 15px 14px;
		color: #E2E2E2;
		border-right: 1px solid #5c5c5c;




		}




#Navigation a:hover, #navigation a:focus, #navigation a:active {







		text-decoration: underline;
		top: -30px;




						}

Alles anzeigen

das war bis jetzt ja gar nicht so schwer (gelernt durch das BUCH: from zero 2 hero / HTML&CSS mit 352 Seiten ) leider war dort keine Zwei Ebenen Navigation Erwähnt worden. Daher wusste ich nicht wie man dies bewerkstelligt.

Grüsse

yobas

Endlich hab ich gefunden wonach ich suchte! und zwar nach diesem hier!
leider kann ich dies nicht benutzten weil, möcht gerne selbst so was schreiben nur geht das wohl nicht, solange ich keine ahnung habe von PHP/Java
naja jedenfalls wisst ihr das nächste mal wenn ich mich melde.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"




"http://www.w3.org/TR/html4/loose.dtd">




<html>




<head>




<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">




</head>










<body>




<a href="#" onClick="if (document.getElementById('subnavi_1').style.display == 'inline') { 




                        document.getElementById('subnavi_1').style.display = 'none'; 




                    } else { 




                        document.getElementById('subnavi_1').style.display = 'inline'; 




                    }">navi_1</a>




<div id="subnavi_1" style="display: none;">




<br>




&nbsp;sub_navi<br>




&nbsp;sub_navi<br>




&nbsp;sub_navi<br>




&nbsp;sub_navi




</div>




<br>




<a href="#" onClick="if (document.getElementById('subnavi_2').style.display == 'inline') { 




                        document.getElementById('subnavi_2').style.display = 'none'; 




                    } else { 




                        document.getElementById('subnavi_2').style.display = 'inline'; 




                    }">navi_2</a>




<div id="subnavi_2" style="display: none;">




<br>




&nbsp;sub_navi<br>




&nbsp;sub_navi<br>




&nbsp;sub_navi<br>




&nbsp;sub_navi<br>




</div>




</body>




</html>

Alles anzeigen

LG und Peace

webmaster3000

Na ja, funktionieren mag es, aber schöner HTML-Code ist es nicht.

Gruß,
webmaster3000

SilverScripting

Zitat von "webmaster3000"

Na ja, funktionieren mag es, aber schöner HTML-Code ist es nicht.

Gruß,
webmaster3000

in wiefern (wenn diese Frage interessehalber gestattet ist?)

LG vom Löwen!

lauras

Ähm..

da fallen mir spontan viele Punkte ein, einige davon:

[*]Menus sind Listen, daher ist <ul> zu verwenden
[*]der Doctype.. naja, wenn schon kein HTML5 dann vielleicht wenigstens Strict?
[*]style im HTML-Tag.. naja, geht auch schöner..
[*]soviel JS im HTML.. wenn man das schon unbedingt über onClick machen muss, dann vielleicht wenigstens ein bisschen auslagern in Funktionen oder so..

Grüße

SilverScripting

ok,
wer das Forum hier bedienen kann, ist wohl klar im Vorteil ich hab gerade noch mal einen Blick auf den Code geworfen und muss zustimmen. Das geht wohl besser, nur wenn ich berücksichtige, dass der Threadersteller noch in der Lernphase ist, finde ich dasd - noch - nicht so schlimm, ehrlich gesagt...

Grüße vom Löwen

Sören

Naja, erstens sollte man schon von Anfang an vernünftigen Code schreiben, sonst wird man das später auch nicht tun (wenn mans noch nicht weiß kann ich das ja verstehen, aber spätestens, wenn der Code schonmal - wie hier im Moment - verbessert worden ist, sollte man auch sauberen schreiben) und zweitens ist yobas Code, soweit ich das verstanden habe, nur kopiert worden.

Jetzt mitmachen!