Horizontales Menü mit Style des aktiven Link

Nissa3

Hallo zusammen,

bin neu hier und auch (noch) kein wirklicher Profi in CSS & HTML.

Ich habe mir ein Beispiel für ein Menu aus dem Internet runtegeladen. Nun komme ich an einer Stelle aber nicht weiter. Und zwar möchte ich das, wenn ich auf z.B. der Startseite bin diese im Menu andersfarbig und mit beiden Linien angezeigt wird, also so wie wenn ich bei den nichtaktiven mit der Maus drüber gehe. Ich komme leider nur soweit das die Schriftfarbe gelb ist aber die zweite, obere Linie einfach nicht angezeigt wird. Was mich auch stört ist, das ich trotzdem einen Link setzen muss. Kann man das nicht einfacher lösen mit <p> oder so?

Wozu dient eigentlich auch das

Code

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ganz am Anfang der css?

Die Deklaration bei nav .cl-effect-7 a verstehe ich auch nicht ganz denn einen Schatten sehe ich nicht und die Textfarbe ist auch nicht schwarz.

Ich hoffe mir kann jemand, helfen und den Quelltext ein wenig erklären. Inzwischen ist wohl vieles im Code überflüssig oder doppelt und dreifach, durch mein hin und her probieren.

HTML Code:

Code

<nav>
<ul>
<li class="cl-effect-7b"><a href="#cl-effect-7">Start</a></li>
<li class="cl-effect-7"><a href="#cl-effect-7">Unternehmen</a></li>
<li class="cl-effect-7"><a href="#cl-effect-7">Portfolio</a></li>
<li class="cl-effect-7"><a href="#cl-effect-7">Anfahrt</a></li>
</ul>
</nav>

CSS Code:

Code

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


body {
    font-family: 'Raleway', sans-serif;
}
ul{
    text-align:center;
    }
li {
    display:inline-block;
}


nav .cl-effect-7 a {
    outline: none;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 1.35em;
}


nav .cl-effect-7 a:hover,
nav .cl-effect-7 a:focus {
    outline: none;
}


/* Effect 7: second border slides up */
.cl-effect-7 a {
    padding: 2px 10px 0px;
    color: #566473;
    text-shadow: none;
    font-weight: 700;
}


.cl-effect-7 a::before,
.cl-effect-7 a::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 3px;
    background: #566473;
    content: '';
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    transform: scale(0.85);
}


.cl-effect-7 a::after {
    opacity: 0;
    -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
    transition: top 0.3s, opacity 0.3s, transform 0.3s;
}


.cl-effect-7 a:hover::before,
.cl-effect-7 a:hover::after,
.cl-effect-7 a:focus::before,
.cl-effect-7 a:focus::after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}


.cl-effect-7 a:hover::after,
.cl-effect-7 a:focus::after {
    top: 0%;
    opacity: 1;
}


/*active*/
.cl-effect-7 a {
    position: relative;
    display: inline-block;
    outline: none;
    color: #566473;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 1.35em;
}


.cl-effect-7 a:hover,
.cl-effect-7 a:focus {
    outline: none;
}


/* Effect 7: second border slides up */
nav .cl-effect-7 a {
    position: relative;
    display: inline-block;
    outline: none;
    color: #566473;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 1.35em;
}


nav .cl-effect-7 a:hover,
nav .cl-effect-7 a:focus {
    outline: none;
}


/* Effect 7: second border slides up */
nav ul{
    text-align:center;
    }

nav li{
    display:inline-block;
}


nav .cl-effect-7b a {
    position: relative;
    display: inline-block;
    outline: none;
    color: #fc0;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 1.35em;
}


nav .cl-effect-7b a:hover,
nav .cl-effect-7b a:focus {
    outline: none;
}


.cl-effect-7b a {
    padding: 2px 10px 0px;
    color: #fc0;
    text-shadow: none;
    font-weight: 700;
}


.cl-effect-7b a::before,
.cl-effect-7b a::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 3px;
    background: #fc0;
    content: '';
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    transform: scale(0.85);
}


.cl-effect-7b a::after {
    opacity: 0;
    -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
    transition: top 0.3s, opacity 0.3s, transform 0.3s;
}


.cl-effect-7b a:hover::before,
.cl-effect-7b a:hover::after,
.cl-effect-7b a:focus::before,
.cl-effect-7b a:focus::after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}


.cl-effect-7b a:hover::after,
.cl-effect-7b a:focus::after {
    top: 0%;
    opacity: 1;
}


/*active*/
.cl-effect-7b a {
    position: relative;
    display: inline-block;
    outline: none;
    color: #fc0;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 1.35em;
}


.cl-effect-7b a:hover,
.cl-effect-7b a:focus {
    outline: none;
}

Alles anzeigen

Gefunden habe ich das Menu hier

MrMurphy

Hallo

Zitat

diese im Menu andersfarbig und mit beiden Linien angezeigt wird, also so wie wenn ich bei den nichtaktiven mit der Maus drüber gehe

und

Zitat

die Schriftfarbe gelb

und

Zitat

Kann man das nicht einfacher lösen mit <p> oder so?

Ja, das geht alles. Ich habe mal ein entsprechendes Beispiel erstellt und kommentiert. Als aktive Seite habe ich mir Lassitude gewählt und als p-Element eingefügt:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Hover Effekt 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <link rel="stylesheet" type="text/css" href="component.css1">
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
      }


      /*ab hier CSS für Menü*/
      nav.cl-effect-7 p {                                /*Hinzugefügt: Farbe des p-Elements*/
         color: yellow;
      }
      nav p,                                             /* p hinzugefügt*/
      nav a {
         position: relative;
         display: inline-block;
         margin: 15px 25px;
         outline: none;
         color: #fff;
         text-decoration: none;
         text-transform: uppercase;
         letter-spacing: 1px;
         font-weight: 400;
         text-shadow: 0 0 1px rgba(255,255,255,0.3);
         font-size: 1.35em;
      }
      nav p,                                             /*p hinzugefügt*/
      nav a:hover,
      nav a:focus {
         outline: none;
      }
      /* Effect 7: second border slides up */
      .cl-effect-7 p,                                     /*p hinzugefügt*/
      .cl-effect-7 a {
         padding: 12px 10px 10px;
         color: #566473;
         text-shadow: none;
         font-weight: 700;
      }
      .cl-effect-7 p::before,                              /*p hinzugefügt*/
      .cl-effect-7 p::after,                               /*p hinzugefügt*/
      .cl-effect-7 a::before,
      .cl-effect-7 a::after {
         position: absolute;
         top: 100%;
         left: 0;
         width: 100%;
         height: 3px;
         background: #566473;
         content: '';
         transition: transform 0.3s;
         transform: scale(0.85);
      }
      .cl-effect-7 p::after,                                /*p hinzugefügt*/
      .cl-effect-7 a::after {
         opacity: 0;
         transition: top 0.3s, opacity 0.3s, transform 0.3s;
      }
      .cl-effect-7 p::before,                                /*p hinzugefügt*/
      .cl-effect-7 p::after,                                 /*p hinzugefügt*/
      .cl-effect-7 a:hover::before,
      .cl-effect-7 a:hover::after,
      .cl-effect-7 a:focus::before,
      .cl-effect-7 a:focus::after {
         transform: scale(1);
      }
      .cl-effect-7 p::after,                                 /*p hinzugefügt*/
      .cl-effect-7 p::after,                                 /*p hinzugefügt*/
      .cl-effect-7 a:hover::after,
      .cl-effect-7 a:focus::after {
         top: 0%;
         opacity: 1;
      }


   </style>
</head>
<body>
   <section class="color-8">
      <nav class="cl-effect-7" id="cl-effect-7">
         <a href="#cl-effect-7">Languor</a>
         <p>Lassitude</p>
         <a href="#cl-effect-7">Murmurous</a>
         <a href="#cl-effect-7">Palimpsest</a>
         <a href="#cl-effect-7">Assemblage</a>
      </nav>
   </section>
</body>
</html>

Alles anzeigen

Zitat

Wozu dient eigentlich auch das

Damit wird auf alle Elemente das Border-Box-Modell angewendet. Das *chen wählt alle Elemente aus. Allerdings reicht auch folgende Angabe aus:

Code

* {
   box-sizing: border-box;
}

Allerdings sollten aus Performancegründen CSS-Angaben für alle Elemente nur sehr sparsam eingesetzt werden.

Zitat

denn einen Schatten sehe ich nicht und die Textfarbe ist auch nicht schwarz

Ich sehe

Code

color: #566473;
         text-shadow: none;

Also weder schwarz noch Schatten.

Zitat

Ich hoffe mir kann jemand, helfen und den Quelltext ein wenig erklären. Inzwischen ist wohl vieles im Code überflüssig oder doppelt und dreifach, durch mein hin und her probieren.

Damit bin zumindest ich zeitlich überfordert. Du kannst deinen Quelltext ja mit meinem sauberen vergleichen und im Browser dann damit rumspielen. Beim Firefox zum Beispiel kannst du im Rechte-Maus-Taste-Menü unter "Element untersuchen" die CSS-Anweisungen ohne Gefahr "ausschalten" und auch ändern. Bevor du Anweisungen dann konkret löscht solltest du dir darüber im Klaren sein, das einige Anweisungen nur für einige Browser erforderlich sein können.

Gruss

MrMurphy

Nissa3

Hi MrMurphy,

super vielen Dank für die ausführliche Erklärung und Hilfe. Prima, genauso wollte ich es haben.

Das mit dem schwarz und Schatten bezog sich auf die Zeilen im Code für nav .cl-effect-7 a, da verstehe ich nicht was da schwarz und mit Schatten sein soll.

Code

nav .cl-effect-7 a {
    outline: none;
    [COLOR=#ff0000]color: #000;[/COLOR]
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    [COLOR=#ff0000]text-shadow: 0 0 1px rgba(255,255,255,0.3);[/COLOR]
    font-size: 1.35em;
}

MrMurphy

Hallo

Code

color: #000;

Das ist weiß. Schwarz ist fff

Code

text-shadow: 0 0 1px rgba(255,255,255,0.3);

Mit 0 0 hat der Schatten keinen Versatz und ist mit 1px nicht zu sehen. Das ist aber auch egal, da beide Anweisungen mit

Code

.cl-effect-7 a {
         ...
         color: #566473;
         text-shadow: none;
         ...
      }

überschrieben werden. Daher kommt die graue Farbe und der Textschatten wird komplett gestrichen.

Gruss

MrMurphy

Tags