Tutorials

Support - Community und Modifikation von homepagemodules.de Foren

Dieses Forum ist geschlossen und wird in keinster Weise mehr betreut!
zurück zu Homepagemodules.de
mehr lesen

Funktioniert etwas nicht? Um alle Bereiche in diesem Forum nutzen zu können, musst du JavaScript aktivieren! Wenn du Hilfe bei der Aktivierung benötigst, klicke bitte hier.

myhpm - Letzte Beiträge

Seite 0 1

nächste Seite »

[Tutorial] Vertikales Menü mit Hover-Effekt in Tutorials
von Bengt • ( Admin | Beiträge: 1.532 )

So sollte Ihre Navigation am Ende aussehen:

Der weiß hinterlegte Button ist ein Beispiel für den Hovereffekt.

Also als erstes muss man wieder in der CSS die nötigen classes erstellen.

.nav
{
  margin : 3px;
  padding: 2px;
}

Hier haben Sie die Ausgangs Class.


.nav li{
  display:block;
  list-style:none;
  border-width:1px;
  border-style:solid;
  border-color: #000000;
  margin : 3px;
  padding: 0px;
  width: 100px;
  text-decoration: none
}

Nun erstellen Sie eine neue Class,um den style <li> - Tags festzulegen.
"list-style: none" bewirkt, dass vor den Navigationspunkten später kein Sonderzeichen z.B. "-".
--> Testen Sie es einfach, in dem Sie einfach "list-style: none" weglassen.


.nav li a{
  background-color: #60b70b;
  display:block;
  color: #ffffff;
  text-decoration: none
}

Da Sie eine Navigation haben möchte, werden Sie später mit A-Tags arbeiten und damit Sie auch hier einen extra Style erstellen wollen, brauchen Sie diese Class.


.nav li a:link {
  color: #ffffff;
}

Eine Navigation wäre ohne Links höchst sinnfrei, deshalb legen Sie in dieser class die Schriftfarbe der Links fest.


.nav li a:hover
{
  color: #000000;
  display:block;
  list-style:none;
  background-image: url(http://www.bilder-hochladen.net/files/egk-4s.gif);
}

Und zum Schluss, wollen Sie noch einen Hovereffekt, damit die User zwischen "Normalen" und "Überfahrenen" Links unterscheiden können.

Erklärungen zu einzelnen Fachbegriffen finden Sie hier!!!

Jetzt braucht Sie nur noch den nötigen Code im Template einfügen:


<ul class="nav">

 {{user_newmail==true.start}}
<li><a href="{{link_mails}}"><img src="http://img.homepagemodules.de/newmail.gif" border=0></a></li>
 {{user_newmail==true.end}}
 {{user_admin==true.start}}
     <li><span><a href="{{link_admin}}">{[header_goto_admin]}</a></span><span class="nav.nav"></span></li>
 {{user_admin==true.end}}
 <li><a href="{{link_index}}"><span>Home</span></a></li>
  <li><a href="{{link_search}}"><span>{[header_goto_search]}</span></a> </li>
{{user_registered==true.start}}
    <li><a href="{{link_config}}"><span>{[header_goto_config]}</span></a></li>
    <li><a href="{{link_mails}}"><span >{[header_goto_pm]}</span></a></li>
    <li><a href="{{link_logout}}"><span>{[header_goto_logout]}</span></a></li>
 {{user_registered==true.else}}
    <li><a href="{{link_signup}}"><span>{[header_goto_signup]}</span></a></li>
    <li><a href="{{link_login}}"><span>{[header_goto_login]}</span></a></li>
 {{user_registered==true.end}}

 {{config_showonline==true.start}} 
    <li><a href="{{link_online}}"><span>{[header_goto_online]}</span></a></li>
 {{config_showonline==true.end}}
 {{config_showmemberlist==true.start}}
    <li><a href="{{link_member}}"><span>{[header_goto_members]}</span></a></li>
 {{config_showmemberlist==true.end}}
 {{geomap==true.start}} 
    <li><a href="{{geomap_link}}"><span>{[header_goto_map]}</span></a> </li>
 {{geomap==true.end}}
 {{calendar==true.start}}
    <li><a href="{{calendar_link}}"><span>{[header_goto_calendar]}</span></a> </li>
 {{calendar==true.end}}
 {{config_showchat==true.start}}
    <li><a href="{{link_chat}}"><span>{[header_goto_chat]}</span></a></li>
 {{config_showchat==true.end}}
    <li><a href="{{link_faq}}"><span>{[header_goto_faq]}</span></a> </li>
</ul>

Die Links dürften Sie im "Obere Leiste" Template finden.
<ul> startet sozusagen Ihre Navigation (im eigentlichen Sinne eine Aufzählungsliste) und <li> und </li> startet bzw. schließt einen Navigationspunkt. Am Ende müssen Sie noch die Navigation mit </ul> schließen.

"Informationelle Selbstbestimmung, freier Zugang zu Wissen und Kultur und die Wahrung der Privatsphäre sind die Grundpfeiler der zukünftigen Informationsgesellschaft."

12.05.2007 15:43

[Tutorial] Vertikales Menü mit Hover-Effekt in Tutorials
von Lestat • ( Anfänger | Beiträge: 31 )

Wo genau müssen die Codes eingefügt werden/was muss ersetzt werden?

29.04.2008 12:41

[Tutorial] Vertikales Menü mit Hover-Effekt in Tutorials
von Bengt • ( Admin | Beiträge: 1.532 )

die oberen codes müssen in Admin --> Layout --> CSS - Direkt Hacken eingefügt werden
der letzte code muss in Admin --> Tempaltes --> dein aktives Template (mehrsprachig) --> Obere Leiste
dort muss dieser code ersetzt werden:

"Informationelle Selbstbestimmung, freier Zugang zu Wissen und Kultur und die Wahrung der Privatsphäre sind die Grundpfeiler der zukünftigen Informationsgesellschaft."

29.04.2008 12:47

[Tutorial] Vertikales Menü mit Hover-Effekt in Tutorials
von Lestat • ( Anfänger | Beiträge: 31 )

Danke, jetzt ist es nur noch EINE Navi...

29.04.2008 12:56

RE: [Tutorial] Vertikales Menü mit Hover-Effekt in Tutorials
von Lady of the light • ( Benutzer | Beiträge: 268 )

Hallo!
Im Gegensatz zu Lestat will ich ja zwei Navis und habe es tatsächlich auch hinbekommen :). Nur formatieren muss ich es noch selber, aber ich glaube fast, dass ich es schaffe...
Ein kleines Problen: Ich hätte die Navi gerne neben dem Forum, aber leider ist sie ein wenig woanders :(.
http://192305.homepagemodules.de/
Nämlich über der Forumstabelle, dort soll sie ja nicht sein :(. Ein Tipp, was ich in diesem Fall eingeben muss? Ich dachte, ich werde aus dem Green-Lemon-Template schlau darüber, aber das war leider nicht der Fall :(.

****************************************

12.08.2009 15:43

RE: [Tutorial] Vertikales Menü mit Hover-Effekt in Tutorials
von Bengt • ( Admin | Beiträge: 1.532 )

füg mal vor dem menü eine tabelle ein.

mit 2 spalten..
in die erste kommt die navigation
in die zweite der content des Forums.

dann musst du die 2. spalte, zeile und tabelle natürlich in der Unteren Leiste gleich ganz oben wieder schließen.

"Informationelle Selbstbestimmung, freier Zugang zu Wissen und Kultur und die Wahrung der Privatsphäre sind die Grundpfeiler der zukünftigen Informationsgesellschaft."

12.08.2009 17:41

RE: [Tutorial] Vertikales Menü mit Hover-Effekt in Tutorials
von Lady of the light • ( Benutzer | Beiträge: 268 )

Hm, irgendwie scheine ich mir dafür zu doof :(, weil ich nur mal wieder mein Board total zerschossen hatte ohne den gewünschten Effekt - habe es erstmal zurückgesetzt.

Kannst du mir einfach rot einfügen, wo die Tabelle hinmuss? Ich bin wirklich zu blond (und das trotz meiner dunklen Haare!) um zu begreifen, wie ich das machen soll - trotz SELFHTML :(

****************************************

12.08.2009 20:05

RE: [Tutorial] Vertikales Menü mit Hover-Effekt in Tutorials
von Bengt • ( Admin | Beiträge: 1.532 )

so und wie sehen deine klassen für die vertikale navi aus?

"Informationelle Selbstbestimmung, freier Zugang zu Wissen und Kultur und die Wahrung der Privatsphäre sind die Grundpfeiler der zukünftigen Informationsgesellschaft."

12.08.2009 20:16

RE: [Tutorial] Vertikales Menü mit Hover-Effekt in Tutorials
von Bengt • ( Admin | Beiträge: 1.532 )

tada:

"Informationelle Selbstbestimmung, freier Zugang zu Wissen und Kultur und die Wahrung der Privatsphäre sind die Grundpfeiler der zukünftigen Informationsgesellschaft."

12.08.2009 20:21

RE: [Tutorial] Vertikales Menü mit Hover-Effekt in Tutorials
von Lady of the light • ( Benutzer | Beiträge: 268 )

Offenbar ist das schwerer, als gedacht... Schau mal, so sollte es bestimmt nicht aussehen...
http://192305.homepagemodules.de/

****************************************

13.08.2009 15:29

RE: [Tutorial] Vertikales Menü mit Hover-Effekt in Tutorials
von Bengt • ( Admin | Beiträge: 1.532 )

naja bei mir nich aber ich hab für das vertikale menü halt auch die klassen aus dem ersten thread in die css kopiert einen anderen namen gegeben und zwar .navi sollte es sein.

siehe im board 76668

"Informationelle Selbstbestimmung, freier Zugang zu Wissen und Kultur und die Wahrung der Privatsphäre sind die Grundpfeiler der zukünftigen Informationsgesellschaft."

13.08.2009 19:50

RE: [Tutorial] Vertikales Menü mit Hover-Effekt in Tutorials
von Lady of the light • ( Benutzer | Beiträge: 268 )

Ich verstehe das nicht, es will ne gehen :(

****************************************

14.08.2009 16:44

RE: [Tutorial] Vertikales Menü mit Hover-Effekt in Tutorials
von Bengt • ( Admin | Beiträge: 1.532 )

naja du nimmst die obere leiste die ich gepostet hab.

gehst in die css und kopierst die klassen aus dem ersten beitrag hier im thread rein.
aber nennst diese .navi

ansonsten gib nochmal link, dann bau ich dir das ein.

"Informationelle Selbstbestimmung, freier Zugang zu Wissen und Kultur und die Wahrung der Privatsphäre sind die Grundpfeiler der zukünftigen Informationsgesellschaft."

14.08.2009 18:04

RE: [Tutorial] Vertikales Menü mit Hover-Effekt in Tutorials
von Lady of the light • ( Benutzer | Beiträge: 268 )

Habe ich Beides gemacht:

CSS:

Obere Leiste von dir genommen :(.

http://192305.homepagemodules.de/

****************************************

14.08.2009 19:27

RE: [Tutorial] Vertikales Menü mit Hover-Effekt in Tutorials
von Bengt • ( Admin | Beiträge: 1.532 )

naja müsstes schon in der unteren leiste, die geöffnete tabelle schließen.

gehst in Untere leiste, dort ganz oben einfach </td></tr></table> beenden

"Informationelle Selbstbestimmung, freier Zugang zu Wissen und Kultur und die Wahrung der Privatsphäre sind die Grundpfeiler der zukünftigen Informationsgesellschaft."

14.08.2009 23:58

Seite 0 1

nächste Seite »

« [Tutorial] Links in Beiträgen hervorheben/ marki

[Tutorial] Automatischer Signatur Strich »

Aus Tutorials in einen anderen Bereich wechseln.

Online:

www.myhpm.de

Suchmaschinenoptimierung mit Ranking-Hits

Antworten: 22 • Hits: 1.548
Neuestes Mitglied: Nobse
Forum als gelesen markieren | empfehlen