✔ Navigationsleiste mit JS erstellen

[CHAKKA1992]

Hallo an alle,
ich baue mir gerade eine HP. Da ich sie mit Microsoft Publisher gemacht habe ist die Navigationsleiste aus Bildern zusammengefügt. Ich möchte diese aber mit JavaScript machen. Kann mann auch das Design der jetztigen Navigationsleiste einbauen?
Meine HP:http://stumppi.st.funpic.de
Wenn mir jemand helfen kann einen JS-Code zu tüffteln dann schreibt mir bitte!


In Hoffnung auf Hilfe

chakka1992

 

[Sven Mintel]

Erst mal muss ich dich entäuschen,.... deine Seite wird von jedem handelsüblichen Popup-Blocker blockiert...

Und dann... falls du mit "Navigationsleiste" das auf http://stumppi.st.funpic.de/HomePAGE_2006_AS.htm meinst...ich wüsste nicht, wozu man da Javascript braucht, das sind ganz normale Links, soweit ich sehe.

Überhaupt... diese Seite erinnert mich an meine ersten Gehversuche
Ich hoffe, du bist jetzt nicht allzusauer...aber wenn ich mir das Ganze so anschaue, wäre es das beste, alles zu Löschen(inkl. dem Programm, mit dem du es erstellt hast), dich in die Materie einzulesen, und alles von Grundauf neu zu machen...

meine erste Seite war dereinst übrigens 2 Tage online, dann hab ich alles übern Jordan gefeuert:suspekt:

 

[CHAKKA1992]

Ich bin eigenlich nicht sauer, da:
1. es sind meine ersten Gehversuche(ich bin 13)
2. das mit dem PopUp blocker wird auch bald besser sein, da ich jetzt ein besseres JavaScript bei Google gefunden habe
3. ich will ja dass ich viel kritik bekomme, da ich wissen will was ich noch alles besser machen kann
4. meine Homepage soll eine kleine Infoseite über mich sein, mit ein Paar extras, und nicht andersherum

zudem habe ich nur den grundstein mit publisher gemacht und den Rest programmiert!

die "navigationsleiste" wird schon mit links gemacht, aber die oberfläche ist mit Bildern bestückt...
deswegen wollte ich ein JavaScript für die Navigationsleiste (das geht eigentlich auch mit CSS, oder?)

gruß chakka1992

 

[Sven Mintel]

Naja....momentan besteht die Navigation aus einer Imagemap mit verlinkten Bereichen.

Ich nehme mal an, du möchtest JavaScript benutzen, um in der Navigation bei Mausereignissen ein wenig Dynamik zu haben.
Das kannst du in der Tat auch mit CSS erreichen.

Du könntest bspw. diese Buttons ausschneiden, und die Schrift entfernen.
Per CSS formatierst du dann normale Textlinks mit dem Bild für den Button als Hintergrund.
Weiterhin gibst du den Links das CSS-Format display:block und als width/height die Abmaße der Buttons.

Die "Dynamik" erreichst du dann über den CSS-Selektor a:hover ....da gibst du einen anderen Button als Hintergrundbild an.

 

[CHAKKA1992]

danke, aber leider verstehe ich es nicht ganz:
-buttons mit gewünschtem bild versehen versteh ich noch, aber den Quelltext hab ich ganz und gar nicht kapiert, soll ich mit deisem thema ins CSS-Forum wechseln?

chakka1992

Ps: ich finde die schnelle hilfe hier super

 

[Sven Mintel]

Jo...wenn du mich fragst, ist es immer besser, auf JS zu verzichten, wenn man es mit CSS oder HTML alleine auch schaffen kann.

Ich schiebs mal ins CSS-Board

 

[Maik]

Wenn die Menü-Buttons beim Überfahren mit der Maus getauscht werden sollen, benötigst du zwei Grafiken und folgende CSS-Regeln:

a.menu:link, a.menu:visited {
display: block;
width: 180px; /* Grafik-Breite */
line-height: 25px; /* Grafik-Höhe */
text-decoration: none;
text-align: center;
background: url(grafik_1.jpg);
}

a.menu:hover {
background: url(grafik_2.jpg);
}

<a href="#" class="menu">home</a>
<a href="#" class="menu">about</a>
<!-- usw. -->

Eine andere Möglichkeit der Button-Animation wäre eine Grafik, die beide Zustände enthält und mittels background-position verschoben wird.

 

[lordofscotland]

Hi Leute,

man kann auch mit css einen Hovereffekt bauen ohne das man da viel Aufwand hat.

Einfach eine Grafik mit dem dem Gewünschten Mass erstellen, nicht zu vergessen dort auch gleich die Grafik mit einzubinden welche als Hoovereffekt erschein soll.

Beispiel:

Grafik: 159x50px
Die erste Hälfte in Dunkelblau (oder nach Wunsch) und die zweite Hälfte in Hellblau (oder nach Wunsch).

dann ganz einfach eine klasse in der styledatei anlegen die so aussehen sollte

a.nav:link, a.nav:visited {
 display: block;
 background: url(../bilder/navi/navi5.png) no-repeat;
 vertical-align: middle;
 font-size: 7.5pt;
 font-weight: bold;
 color: #FFFFFF;
 text-align: left;
 padding-top: 5px;
 padding-left: 20px;
 height: 20px !important;
 height: 24px;
 width: 100%;
 text-decoration: none;
 margin-top:2px;
}
a.nav:hover {
 background-position: 0px -24px;
 text-decoration: none;
 color: #CCFFFF;
}
a.nav#active_menu {
 color:#00003F;
 font-weight: bold;
}
a.nav#active_menu:hover {
 color:#00003F;
}

Wie man sieht greift die Klasse auf nur ein Bild zurück und gibt beim Hoover dann die 2. Ebene des Bildes aus.

Das ganze dann mittels <a href="#" class="nav" id="nav">Home</a> einbinden und fertig ist das ganze.


lordofscotland

 

[versuch13]

Hi Leute,

man kann auch mit css einen Hovereffekt bauen ohne das man da viel Aufwand hat.

Einfach eine Grafik mit dem dem Gewünschten Mass erstellen, nicht zu vergessen dort auch gleich die Grafik mit einzubinden welche als Hoovereffekt erschein soll.

Beispiel:

Grafik: 159x50px
Die erste Hälfte in Dunkelblau (oder nach Wunsch) und die zweite Hälfte in Hellblau (oder nach Wunsch).

dann ganz einfach eine klasse in der styledatei anlegen die so aussehen sollte

a.nav:link, a.nav:visited {
 display: block;
 background: url(../bilder/navi/navi5.png) no-repeat;
 vertical-align: middle;
 font-size: 7.5pt;
 font-weight: bold;
 color: #FFFFFF;
 text-align: left;
 padding-top: 5px;
 padding-left: 20px;
 height: 20px !important;
 height: 24px;
 width: 100%;
 text-decoration: none;
 margin-top:2px;
}
a.nav:hover {
 background-position: 0px -24px;
 text-decoration: none;
 color: #CCFFFF;
}
a.nav#active_menu {
 color:#00003F;
 font-weight: bold;
}
a.nav#active_menu:hover {
 color:#00003F;
}

Wie man sieht greift die Klasse auf nur ein Bild zurück und gibt beim Hoover dann die 2. Ebene des Bildes aus.

Das ganze dann mittels <a href="#" class="nav" id="nav">Home</a> einbinden und fertig ist das ganze.


lordofscotland

Naja, ich bin etwas zu langsam gewesen, das wollte ich dir jetzt auch raten und habe dir noch ein kleines Beispiel dazu gemacht.

Hier findest du auch noch ein paar Informationen die dir ganz nützlich werden könnten.

Edit // Link vergeßen: http://css.maxdesign.com.au/listamatic/

Gruß

 

[CHAKKA1992]

Danke für den Anhang, den veränder ich noch n bissel und stell ihn dann auf meine HP...

Vielen Dank für die schnelle Hilfe hier

chakka1992