Ergebnis 1 bis 4 von 4

Thema: Horizontales Menü mit Style des aktiven Link

  1. #1
    HTML Newbie
    Registriert seit
    29.08.2015
    Beiträge
    3
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard Horizontales Menü mit Style des aktiven Link

    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;
    }

    Gefunden habe ich das Menu hier
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    620
    Danke
    0
    Bekam 72 mal "Danke" in 70 Postings

    Standard AW: Horizontales Menü mit Style des aktiven Link

    Hallo

    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

    die Schriftfarbe gelb
    und

    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:

    Code:
    <!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>
    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.

    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.

    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
    Geändert von MrMurphy (29.08.2015 um 21:35 Uhr)

  3. Folgende User finden die Antwort von MrMurphy gut:


  4. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    29.08.2015
    Beiträge
    3
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Horizontales Menü mit Style des aktiven Link

    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: #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;
    }

  5. #4
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    620
    Danke
    0
    Bekam 72 mal "Danke" in 70 Postings

    Standard AW: Horizontales Menü mit Style des aktiven Link

    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
    Geändert von MrMurphy (29.08.2015 um 23:02 Uhr)

Ähnliche Themen

  1. Horizontales Menü
    Von Inaa im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 03.03.2013, 11:47
  2. Flexibles horizontales Menü
    Von jorge_e im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 21.10.2011, 12:57
  3. Horizontales Drop-Down-Menü
    Von Grete63 im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 18.09.2010, 14:39
  4. Horizontales Menü mit mehreren Grafiken
    Von ludgerf321 im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 14.01.2010, 09:36
  5. Suche horizontales Menü
    Von Ben_H im Forum Script-Archiv
    Antworten: 1
    Letzter Beitrag: 18.02.2006, 14:20

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •