Antworten auf deine Fragen:
Neues Thema erstellen

Hilfe beim Navigationspunkt

S

SipSak

Guest

Hallöle erst mal...

Und zwar bin ich so seit einer Woche in Beschäftigung mit CSS und habe enorm schnell dazu gelernt durch die Hilfe der Foren und Tutorial und wollte mich erst mal bedanken... *Däumchen hoch für alle Helfer*

So und zwar geht es darum, das ich gerne wissen würde wie man den Navigationsslider von in css programmieren könnte...
da ich noch anfänger bin wären beispiele sehr sehr hilfreich...

DANKE FÜR JEDE ANTWORT:):)
 

simonpicos

simonpicos

Mod | Forum

AW: Hilfe beim Navigationspunkt

Einfach mal in den Quelltext schauen :)

Ich erspare dir mal die Sucharbeit:

HTML: 
<div class="menu">

	<ul class="level1">

		<li class="fly"><a class="topa" href="#url">MENU<!--[if gte IE 7]><!--></a><!--<![endif]-->

		<!--[if lte IE 6]><table><tr><td><![endif]-->

			<div>

			<ul>

				<li><a href="#url">Home</a></li>

				<li><a href="#url">Get In Touch<!--[if gte IE 7]><!--></a><!--<![endif]-->

				<!--[if lte IE 6]><table><tr><td><![endif]-->

					<ul>

						<li><a href="#url">Email</a></li>

						<li><a href="#url">Telephone</a></li>

						<li><a href="#url">Online Form</a></li>

						<li><a href="#url">Snail Mail Address</a></li>

					</ul>

				<!--[if lte IE 6]></td></tr></table></a><![endif]-->

				</li>

				<li><a href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->

				<!--[if lte IE 6]><table><tr><td><![endif]-->

					<ul>

						<li><a href="#url">Ski Hire Facilities</a></li>

						<li><a href="#url">Main Ski Slopes</a></li>

						<li><a href="#url">Night Life</a></li>

						<li><a href="#url">Restaurants</a></li>

						<li><a href="#url">Car Hire</a></li>

					</ul>

				<!--[if lte IE 6]></td></tr></table></a><![endif]-->

				</li>

				<li><a href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->

				<!--[if lte IE 6]><table><tr><td><![endif]-->

					<ul>

						<li><a href="#url">Where to go</a></li>

						<li><a href="#url">What to do</a></li>

						<li><a href="#url">Places of interest</a></li>

						<li><a href="#url">National Parks</a></li>

					</ul>

				<!--[if lte IE 6]></td></tr></table></a><![endif]-->

				</li>

				<li><a href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->

				<!--[if lte IE 6]><table><tr><td><![endif]-->

					<ul>

						<li><a href="#url">Money Exchange</a></li>

						<li><a href="#url">Resort Information</a></li>

						<li><a href="#url">Language</a></li>

						<li><a href="#url">Short Breaks</a></li>

					</ul>

				<!--[if lte IE 6]></td></tr></table></a><![endif]-->

				</li>

				<li><a href="#url">Privacy</a></li>

			</ul>

			</div>

		<!--[if lte IE 6]></td></tr></table></a><![endif]-->

		</li>

	</ul>

</div>



Die zugehörige CSS:

Code: 
.menu {position:relative; margin:50px 0 300px 10px;}

.menu ul {padding:0; margin:0; list-style:none;}

.menu ul.level1 {position:relative; z-index:100;}

.menu ul.level1 li.fly {float:left; width:100px; height:35px; background:url(css3flyline/tab4.png);

-o-border-radius: 5px 0 0 5px;

-icab-border-radius: 5px 0 0 5px;

-khtml-border-radius: 5px 0 0 5px;

-moz-border-radius: 5px 0 0 5px;

-webkit-top-left-border-radius: 5px;

-webkit-bottom-left-border-radius: 5px;

border-radius: 5px 0 0 5px;



}

.menu ul.level1 li.fly a.topa {display:block; height:35px; line-height:35px; padding-left:10px; width:90px; text-decoration:none; font-size:12px; font-family:arial, sans-serif; color:#444; font-weight:bold; float:left; background:url(css3flyline/arrow.gif) no-repeat 60px center;}



.menu ul.level1 div {position:absolute; left:100px; top:0; width:600px; height:0; z-index:-1; overflow:hidden;

transition: 0.5s ease-in-out;

-o-transition: 0.5s ease-in-out;

-moz-transition: 0.5s ease-in-out;

-webkit-transition: all 0.5s ease-in-out;

}



.menu ul.level1 div ul {position:absolute; left:-600px; top:0; background:url(css3flyline/tab4.png);

-o-border-radius: 0 5px 5px 0;

-icab-border-radius: 0 5px 5px 0;

-khtml-border-radius: 0 5px 5px 0;

-moz-border-radius: 0 5px 5px 0;

-webkit-top-right-border-radius: 5px;

-webkit-bottom-right-border-radius: 5px;

border-radius: 0 5px 5px 0;



transition: 0.5s ease-in-out;

-o-transition: 0.5s ease-in-out;

-moz-transition: 0.5s ease-in-out;

-webkit-transition: all 0.5s ease-in-out;

}

.menu ul.level1 ul li {float:left; height:35px; position:relative;}

.menu ul.level1 ul li a {float:left; height:35px; line-height:35px; white-space:nowrap; padding:0 15px; text-decoration:none; font-size:13px; font-family:arial, sans-serif; color:#444; font-weight:bold; background:url(css3flyline/divider.png) no-repeat left top;}



.menu ul.level1 div ul ul {position:absolute; left:0; top:-170px; width:155px; z-index:-1;

transition: 0.5s ease-in-out;

-o-transition: 0.5s ease-in-out;

-moz-transition: 0.5s ease-in-out;

-webkit-transition: all 0.5s ease-in-out;

}

.menu ul.level1 div ul ul li {float:left; width:155px; height:25px;}

.menu ul.level1 div ul ul li a {display:block; width:125px; padding-left:15px; text-decoration:none; font-size:13px; font-family:arial, sans-serif; color:#444; font-weight:bold; height:25px; line-height:25px; font-weight:normal; background:none;}





.menu ul.level1 li:hover > a.topa {color:#fff;}



.menu ul.level1 li:hover div {left:100px; top:0; height:180px; width:600px;}



.menu ul.level1 :hover div ul {left:0;}

.menu ul.level1 :hover div ul ul {left:1px; top:-180px; padding-bottom:5px; background:#acacac;

-o-border-radius: 0 0 5px 5px;
 
-icab-border-radius: 0 0 5px 5px;

-khtml-border-radius: 0 0 5px 5px;

-moz-border-radius: 0 0 5px 5px;

-webkit-bottom-left-border-radius: 5px;

-webkit-bottom-right-border-radius: 5px;

border-radius: 0 0 5px 5px;

}



.menu ul.level1 li:hover div ul li:hover a {position:relative;}

.menu ul.level1 li:hover div ul li:hover > a {color:#fff;}



.menu ul.level1 :hover div ul :hover ul {left:1px; top:35px;}



/* These styles are for IE6 */

.menu table {border-collapse:collapse; margin-bottom:-1px; width:0; height:0; position:absolute; left:0; top:0;}

.menu ul.level1 li a.topa:hover {white-space:nowrap; color:#fff;}

.menu ul.level1 li a.topa:hover div {left:0; top:0; height:180px; width:600px;}

.menu ul.level1 li a.topa:hover div ul li a:hover {color:#fff;}


Aber das einfachste ist es sicher nicht...
 
Myhar

Myhar

Hat es drauf

AW: Hilfe beim Navigationspunkt

Generell als Tipp kann man dir sagen, dass bei fremden Seiten in den Quelltext schauen immer eine gute Lösung ist. Der ist dir auf keiner Seite verborgen und kann (und sollte) auch mit Firebug für Firefox oder einem ähnlichen Webdeveloper Werkzeug für einen anderen Browser analysiert werden. Dadurch lernt man meistens am Besten, vor allem, da man auch direkt CSS Werte anpassen und herumprobieren kann.
Das einzige, was schwer zu analysieren ist, ist minifizierter Javascript Code :)

L. G.
 
S

SipSak

Guest

AW: Hilfe beim Navigationspunkt

@ myhar

Was kann ich denn unter einen manifizierten javascript code verstehen?
Für mich ist das alles Neuland...

VG
 
Myhar

Myhar

Hat es drauf

AW: Hilfe beim Navigationspunkt

Kurz: Minifiziertes Javascript ist Javascript, welches minifiziert (also verkleinert, komprimiert) wurde.
Lang:
Beim Programmieren von Javascript verwendet man, wie bei anderen Programmiersprachen auch, Einrückungen, sprechende Variablennamen, etc.
Dem Browser sind diese Sachen jedoch egal, also wird oft das Javascript mithilfe eines Minifiers komprimiert. Kleines Beispiel:
Dies ist der originale jQuery Code, welchen man noch verstehen und lesen kann.
Das ist der minifizierte Code. Von der Funktionsweise macht der Code exakt das selbe wie das vorhin verlinkte Original. Nur lesen kann man es nicht mehr ;)
 
S

SipSak

Guest

AW: Hilfe beim Navigationspunkt

Noch ein Stein im Weg *seufzer*
Aber zum Glück gibt es PSD-Tutorials und man kann wirklich hier super lernen und super schnell Antworten auf Fragen kriegen...
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 225 (Mitglieder: 4, Gäste: 221)
Robots: 990

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.527
Neuestes Mitglied
Christian Eidelloth
Oben