tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
2
ZUGRIFFE
985
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 11.03.10 03:00 #1
    LLeerrooyy LLeerrooyy ist offline Mitglied Bronze
    Registriert seit
    Mar 2010
    Beiträge
    40
    Hallo zusammen,

    ich habe mir zu Testzwecken eine CSS Menu Vorlage herunter geladen.
    Diese will ich jetzt verändern. Habe im bereich CSS Menus keine großen Erfahrungen.
    Ich kann eigentlich nur standard CSS Text Menus erstellen.
    Aber diese Vorlage hat jetzt Grafiken, die sich je nach Aktion verändern.
    Der hover Effekt klappt wunderbar. Aber wie bekomme ich den "Gedrückt" Effekt hin ?
    Sprich, ich klicke auf einen Menupunkt, und aktiviere dann die Klasse "current".

    Hier mal der Code:
    HTML-Code:
    <style type="text/css">
.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(button1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu1 li {float:left;}
.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li.current a {color:#fff; background:url(button3.gif);}
.menu1 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(button2.gif);}
.menu1 li a:hover b {background:url(button2.gif) no-repeat right top;}
.menu1 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
.menu1 li.current a:hover b {background:url(button3.gif) no-repeat right top;}
</style>
</head>
<body>
<ul class="menu1">
<li class="current"><a href="#nogo"><b>Home</b></a></li>
<li><a href="#nogo"><b>Test-Button</b></a></li>
<li><a href="#nogo"><b>BlaBlub</b></a></li>
<li><a href="#nogo"><b>Where to find us</b></a></li>
<li><a href="#nogo"><b>Contact us</b></a></li>
<li><a href="#nogo"><b>Search</b></a></li>
</ul>
</body>
    Angehängte Grafiken Angehängte Grafiken    
     
    Zitieren Zitieren
  2. 11.03.10 06:26 #2
    Maik Tutorials.de Gastzugang
    Moin,

    die Klasse .current für die aktuell geöffnete Seite findet sich im HTML-Code hier:
    Code :
    1
2
3
4
5
6
7
8

    <ul class="menu1">
<li [B]class="current"[/B]><a href="home.html"><b>Home</b></a></li>
<li><a href="test-button.html"><b>Test-Button</b></a></li>
<li><a href="#nogo"><b>BlaBlub</b></a></li>
<li><a href="#nogo"><b>Where to find us</b></a></li>
<li><a href="#nogo"><b>Contact us</b></a></li>
<li><a href="#nogo"><b>Search</b></a></li>
</ul>


    Demnach wird beim Klick auf Test-Button eine neue Seite (test-button.html) aufgerufen, in deren Quellcode die Klasse in diesem Menüpunkt aufgerufen wird:
    Code :
    1
2
3
4
5
6
7
8

    <ul class="menu1">
<li><a href="home.html"><b>Home</b></a></li>
<li [B]class="current"[/B]><a href="test-button.html"><b>Test-Button</b></a></li>
<li><a href="#nogo"><b>BlaBlub</b></a></li>
<li><a href="#nogo"><b>Where to find us</b></a></li>
<li><a href="#nogo"><b>Contact us</b></a></li>
<li><a href="#nogo"><b>Search</b></a></li>
</ul>


    Eine andere Technik kannst du dem Artikel Highlighting current page with CSS entnehmen.

    Wenn du in unserem Forum CSS-Code von dritten Seiten (hier Stu Nicholls -> Professional horizontal series) veröffentlichst, sei bitte so gut, deren Copyright-Hinweis nicht aus dem Code zu entfernen - vielen Dank!

    Code css:
    1
2

    /*Credits: CSSpplay */
/*URL: http://www.cssplay.co.uk/menus/pro_one */
    mfg Maik
     
    Zitieren Zitieren
  3. 11.03.10 07:41 #3
    LLeerrooyy LLeerrooyy ist offline Mitglied Bronze
    Registriert seit
    Mar 2010
    Beiträge
    40
    Danke erstmal. Das teste ich später.
    Das mit dem Copyright war nicht gewollt. Ich habe nur den Code, der Wichtig für die Funktionalität war, eingefügt.
     
    Zitieren Zitieren
« Contentprobleme. Wie Floatet man richtig? | Falsche Listenformatierung »

Ähnliche Themen

  1. Dropline Menu erstellen in CSS Vorlage vorhanden
    Von moa75 im Forum CSS
    Antworten: 10
    Letzter Beitrag: 10.03.10, 19:20
  2. Vorlage
    Von Schlubl im Forum C/C++
    Antworten: 5
    Letzter Beitrag: 31.05.06, 14:34
  3. PDF Vorlage
    Von webhoster im Forum PHP
    Antworten: 1
    Letzter Beitrag: 19.10.05, 13:25
  4. rechte Maustaste->Menu->noch ein Menu
    Von fischmir im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 2
    Letzter Beitrag: 18.07.05, 15:15
  5. Dateien aus Vorlage erzeugen und Inhalt verändern.
    Von Davide im Forum PHP
    Antworten: 3
    Letzter Beitrag: 21.02.05, 22:01