XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Crocko.com Navigation Nachbau (http://xhtmlforum.de/showthread.php?t=69611)

me01 21.06.2013 23:37

Crocko.com Navigation Nachbau
 
Hallo, würde gerne mal die Navigation von crocko.com nachbauen, nun meine Frage wie wurde die umgesetzt - Only HTML/CSS oder auch Javascript?

Hier ein Bild: http://abload.de/img/555o6kie.png

Wenn einer weis in welche "Richtung" es geht bitte ein paar Stichworte nennen, ich google mich da recht fix durch.

Gruß me01

Schwarzerhut 22.06.2013 01:23

Hab mal was auf die schnelle gemacht.
Ist reines HTML + CSS.
Für neue Browser ist das aufjedenfall ausreichend und crock.com nutzt das auch. Kann nur sein das ältere Browser damit schwierigkeiten haben, ich würde sogar sicher sein ;)

Für mehr informationen:
SELFHTML: Stylesheets / CSS-basierte Layouts / Navigationsleisten

LG Hut


HTML-Code:

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
        <head>
                <style>
                        .navi .activ{background-color:#90b53b;
                                padding:4px 18px;
                                float:left;color:#FFF;
                                margin:0px 8px 0px 8px;
                                font-family:Franklin Gothic Demi, Arial,Tahoma,Helvetica,sans-serif;font-size:14px;
                                text-shadow: #000 0 1px 1px;
                                -moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;
                        } 

                        .navi ul{
                                margin:0px;padding:0px; float:left;
                        }
                        .navi li{
                                float:left;display: inline;
                                list-style:none;padding:0px;margin:0px;
                        }
                        .navi li a{
                                margin:0px;
                                display:block;font-family:Franklin Gothic Demi, Arial,Tahoma,Helvetica,sans-serif;
                                text-align:center;
                                text-decoration:none;
                                padding:4px 18px;color:#7a7a7a;
                                text-shadow: #fff 0 1px 1px;font-size:14px;
                        } 
       
                        .navi li a:hover{
                               
                                display:block;
                                text-align:center;
                                text-decoration:none;background-color:#d6dec5;
                                padding:4px 18px;color:#7a7a7a;font-size:14px;
                                -moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;
                        } 
       
                </style>
        </head>
        <body>
                <div class="navi">
                        <ul>
                                <li><span class="activ">Dateien Hochladen</span></li>
                                <li><a href="#">Tour</a></li>
                                <li><a href="#">Premium</a></li>                               
                        </ul>
                </div>
        </body>
</html>


me01 22.06.2013 10:51

Cool, danke für die schnelle Hilfe!

me01 23.06.2013 15:14

Hab dein Code für meine Zwecke mal angepasst:

Code:

<style>
#navigation .active{
        font: 12px Verdana, Tahoma, Arial;
        font-weight: bold;
        text-shadow: #000 0 1px 1px;
        color: #fff;
        background-color: #333;
        border-radius: 12px;
        padding: 5px 18px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
}

#navigation ul{
        float: left;
        margin: 13px 0px 0px 175px;
}

#navigation li{
        float: left;
        list-style: none;
        padding: 0px;
        margin: 0px;
}

#navigation li a{
        font: 12px Verdana, Tahoma, Arial;
        font-weight: bold;
        text-align: center;
        text-shadow: #fff 0 1px 1px;
        color: #7a7a7a;
        padding: 5px 18px;
        margin: 0px 3px;


#navigation li a:hover{
        font: 12px Verdana, Tahoma, Arial;
        font-weight: bold;
        color: #7a7a7a;
        background-color: #e2e2e2;
        padding: 5px 18px;
        border-radius: 12px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;

</style>

<div id="navigation">
 <ul>
  <li><a href="#"><span class="active">Startseite</span></a></li>
  <li><a href="#">Seite 1</a></li>
  <li><a href="#">Seite 2</a></li>
  <li><a href="#">Seite 3</a></li>               
  <li><a href="#">Seite 4</a></li>               
 </ul>
</div>


Die Startseite ist natürlich auch eine URL - jetzt taucht das Problem auf das wenn ich über "Startseite" fahre das #navigation li a:hover vom CSS mit angezeigt wird, heißt das der graue border background von den anderen nicht class="active" ebenfalls versetzt angezeigt wird.

Einfache Lösung: die background-color von #navigation li a:hover anpassen und die gleiche Farbe wie in #navigation .active verwenden. Funktioniert auch, allerdings gilt dieser background dann auch für die anderen nicht class="active" links auch.

Hat da jemand eine saubere Lösung? Das einzige was noch nicht funktioniert bzw. stört ist das wenn ich über den link Startseite fahre der graue border background von #navigation li a:hover angezeigt wird.

Schwarzerhut 23.06.2013 18:13

Code:

<style>
#navigation .active{
        font: 12px Verdana, Tahoma, Arial;
        font-weight: bold;
        text-shadow: #000 0 1px 1px;
        color: #fff;
        background-color: #333;
        border-radius: 12px;
        padding: 5px 18px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
}

#navigation .active:hover{
        font: 12px Verdana, Tahoma, Arial;
        font-weight: bold;
        text-shadow: #000 0 1px 1px;
        color: #fff;
        background-color: #333;
        border-radius: 12px;
        padding: 5px 18px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
}

#navigation ul{
        float: left;
        margin: 13px 0px 0px 175px;
}

#navigation li{
        float: left;
        list-style: none;
        padding: 0px;
        margin: 0px;
}

#navigation li a{
        font: 12px Verdana, Tahoma, Arial;
        font-weight: bold;
        text-align: center;
        text-shadow: #fff 0 1px 1px;
        color: #7a7a7a;
        padding: 5px 18px;
        margin: 0px 3px;


#navigation li a:hover{
        font: 12px Verdana, Tahoma, Arial;
        font-weight: bold;
        color: #7a7a7a;
        background-color: #e2e2e2;
        padding: 5px 18px;
        border-radius: 12px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;

</style>

<div id="navigation">
 <ul>
  <li><a href="#" class="active">Startseite</a></li>
  <li><a href="#">Seite 1</a></li>
  <li><a href="#">Seite 2</a></li>
  <li><a href="#">Seite 3</a></li>               
  <li><a href="#">Seite 4</a></li>               
 </ul>
</div>

Warum nicht einfach dem <a> die class geben und nen hover dafür machen.

LG

Hut

me01 23.06.2013 19:50

Perfekt! So ähnlich hatte ich vorher auch rumprobiert aber anders: ich hatte
statt deinem #navigation .active:hover ein a.active1:hover gemacht und #navigation .active2 diese hab ich dann beide verwendet, was aber nicht richtig funktioniert hatte. Wusste halt nicht das man ner class direkt ein hover geben kann.

Danke dir nochmals :)


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:34 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023