Schiebemenü mit CSS3 implementiert

Ergebnis:

Implementierungscode:

<!DOCTYPE html><html class="Menü">
<html>

<Kopf>

<meta charset="utf-8"/>
<meta http-equiv="X-UA-kompatibel" content=="IE=edge"/>
<meta name="google" value="notranslate"/>
<title>Seitenmenü</title>

<link rel="stylesheet" type="text/css" href="css/menu.css">
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">


  
 



</Kopf>
<Text>



</div><nav class="Hauptmenü">


  
 <div>
    <a class="logo" href="http://startific.com">
    </a> 
  </div> 
<div class="Einstellungen"></div>
<div Klasse="Scrollleiste" id="Stil-1">
      
<ul>
  
<li>                                   
<a href="http://startific.com">
<i class="fa fa-home fa-lg"></i>
<span class="nav-text">Startseite</span>
</a>
</li>   
   
<li>                                 
<a href="http://startific.com">
<i class="fa fa-user fa-lg"></i>
<span class="nav-text">Anmelden</span>
</a>
</li>   

    
<li>                                 
<a href="http://startific.com">
<i class="fa fa-envelope-o fa-lg"></i>
<span class="nav-text">Kontakt</span>
</a>
</li>   
  


 
<li>
<a href="http://startific.com">
<i Klasse="fa fa-Herz-o fa-lg"></i>
                        
<span class="teilen"> 


<div Klasse="addthis_default_style addthis_32x32_style">
  
<div style="position:absolut;
Rand links: 56px;oben: 3px;"> 
   
  

  
 <a href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank" class="share-popup"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png" width="30px" height="30px"></a>

   <a href="https://twitter.com/share" target="_blank" class="share-popup"><img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/512/Twitter_alt.png" width="30px" height="30px"></a>

   


<a href="https://plusone.google.com/_/+1/confirm?hl=de&url=_URL_&title=_TITLE_
" target="_blank" class="share-popup"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/google-plus-icon.png" width="30px" height="30px"></a>   
  
  
  
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ff17589278d8b3a"></script>
                       
                            
                              
                            
                          
                        </span>
                        <span class="twitter"></span>
                        <span class="google"></span>
                        <span Klasse="fb-like">  
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fstartific&width&layout=button&action=like&show_faces=false&share=false&height=35" scrolling="nein" frameborder="0" style="border:none; overflow:hidden; height:35px;" allowTransparency="true"></iframe>
                       
                        </span>
                        <span class="nav-text">
                        </span>
                        
                    </a>

</li>
                            

  
  
</li>
<li Klasse="darkerlishadow">
<a href="http://startific.com">
<i Klasse="fa fa-clock-o fa-lg"></i>
<span class="nav-text">Neuigkeiten</span>
</a>
</li>
  
<li Klasse="dunklerli">
<a href="http://startific.com">
<i class="fa fa-desktop fa-lg"></i>
<span class="nav-text">Technologie</span>
</a>
</li>
  
<li Klasse="dunklerli">
<a href="http://startific.com">
<i Klasse="fa fa-plane fa-lg"></i>
<span class="nav-text">Reisen</span>
</a>
</li>
  
<li Klasse="dunklerli">
<a href="http://startific.com">
<i class="fa fa-shopping-cart"></i>
 <span class="nav-text">Einkaufen</span>
</a>
</li>
  
<li Klasse="dunklerli">
<a href="http://startific.com">
<i class="fa fa-Mikrofon fa-lg"></i>
<span class="nav-text">Film & Musik</span>
</a>
</li>

<li Klasse="dunklerli">
<a href="http://startific.com">
<i Klasse="fa fa-flask fa-lg"></i>
<span class="nav-text">Webtools</span>
</a>
</li>
  
<li Klasse="dunklerli">
<a href="http://startific.com">
<i class="fa fa-Bild-o fa-lg"></i>
<span class="nav-text">Kunst & Design</span>
</a>
</li>

<li Klasse="dunklerli">
<a href="http://startific.com">
<i class="fa fa-align-left fa-lg"></i>
Zeitschriften
</span>
</a>
</li>
  
<li Klasse="dunklerli">
<a href="http://startific.com">
<i class="fa fa-gamepad fa-lg"></i>
<span class="nav-text">Spiele</span>
</a>
</li>
  
<li Klasse="dunklerli">
<a href="http://startific.com">
<i class="fa fa-glass fa-lg"></i>
<span class="nav-text">Leben und Stil
</span>
</a>
</li>
  
<li Klasse="darkerlishadowdown">
<a href="http://startific.com">
<i class="fa fa-rocket fa-lg"></i>
<span class="nav-text">Spaß</span>
</a>
</li>
 
  
</ul>

  
<li>
                                   
<a href="http://startific.com">
<i class="fa fa-question-circle fa-lg"></i>
<span class="nav-text">Hilfe</span>
</a>
</li>   
    
  
<ul Klasse="Abmelden">
<li>
                   <a href="http://startific.com">
                         <i class="fa fa-Glühbirne-o fa-lg"></i>
                        <span class="nav-text">
                            Ratgeber 
                        </span>
                        
                    </a>
</li>  
</ul>
        </nav>
        
  

			
  
  
</body>
</html>

CSS3

Körper
{
  Rand: 0px;
  Polsterung: 0px;
	Schriftfamilie: „Open Sans“, Arial;
	Hintergrund: URL ('https://static.tumblr.com/94eb957a00fd03c0c2f7d26decd71578/u1rhacw/osAmyyh1q/tumblr_static_tumblr_static_gaussian_blur_gradient_desktop_1680x943_wallpaper-393751.jpg');
	Farbe: #fff;
	Schriftstärke: 300;

}


@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
@import-URL (https://fonts.googleapis.com/css?family=Titillium+Web:300);

.Logo{
  
}

.Einstellungen {
  
  Höhe: 73px; 
  schweben: links;
  Hintergrund: URL (https://s3.postimg.org/bqfooag4z/startific.jpg);
  Hintergrundwiederholung: keine Wiederholung;
  Breite: 250px;
  Rand: 0px;
 Textausrichtung: zentriert;
Schriftgröße: 20px;
Schriftfamilie: „Strait“, serifenlos;

}






/* Bildlaufleiste */
.Bildlaufleiste
{

Höhe: 90%;
Breite: 100 %;
Überlauf-y: versteckt;
Überlauf-x: versteckt;
}

.scrollbar:hover
{

Höhe: 90%;
Breite: 100 %;
Überlauf-y: scrollen;
Überlauf-x: versteckt;
}

/* Bildlaufleistenstil */ 



#Stil-1::-Webkit-Scrollbar-Track
{
Rahmenradius: 2px;
}

#Stil-1::-Webkit-Scrollbar
{
Breite: 5px;
Hintergrundfarbe: #F7F7F7;
}

#Stil-1::-webkit-scrollbar-thumb
{
Rahmenradius: 10px;
-webkit-box-shadow: Einschub 0 0 6px rgba(0,0,0,.3);
Hintergrundfarbe: #BFBFBF;
}
/* Ende der Bildlaufleiste */ 




.fa-lg {
Schriftgröße: 1em;
  
}
.fa {
Position: relativ;
Anzeige: Tabellenzelle;
Breite: 55px;
Höhe: 36px;
Textausrichtung: zentriert;
oben: 12px; 
Schriftgröße: 20px;

}



.main-menu:hover, nav.main-menu.expanded {
Breite: 250px;
Überlauf: versteckt;
Deckkraft: 1;

}

.Hauptmenü {
Hintergrund: #F7F7F7;
Position: absolut;
oben: 0;
unten: 0;
Höhe: 100 %;
links: 0;
Breite: 55px;
Überlauf: versteckt;
-webkit-transition:Breite .2s linear;
Übergang: Breite .2s linear;
-webkit-transform:translateZ(0) Skala(1,1);
Kastenschatten: 1px 0 15px rgba (0, 0, 0, 0,07);
  Deckkraft: 1;
}

.Hauptmenü>ul {
Rand: 7px 0;

}

.Hauptmenü li {
Position: relativ;
Anzeige:Block;
Breite: 250px;
  


}

.Hauptmenü li>a {
Position: relativ;
Breite: 255px;
Anzeige:Tabelle;
Rahmen-Collapse:Collapse;
Rahmenabstand: 0;
Farbe: #8a8a8a;
Schriftgröße: 13px;
Textdekoration: keine;
-webkit-transform:translateZ(0) Skala(1,1);
-webkit-transition:alle .14s linear;
Übergang: alle 0,14 s linear;
Schriftfamilie: „Strait“, serifenlos;
Rahmen oben: 1px durchgezogen #f2f2f2;

Textschatten: 1px 1px 1px #fff;  
}



.Hauptmenü .Navigationssymbol {
  
Position: relativ;
Anzeige: Tabellenzelle;
Breite: 55px;
Höhe: 36px;
Textausrichtung: zentriert;
vertikale Ausrichtung: Mitte;
Schriftgröße: 18px;

}

.Hauptmenü .Navigationstext {
   
Position: relativ;
Anzeige: Tabellenzelle;
vertikale Ausrichtung: Mitte;
Breite: 190px;
Schriftfamilie: „Titillium Web“, serifenlos;
}

.Hauptmenü .Teilen {
}



.Hauptmenü .fb-like {

links: 180px;
Position: absolut;
oben: 15px;
}

.main-menu>ul.logout {
Position: absolut;
links: 0;
unten: 0;
  
}

.keine Berührung .scrollbar.hover {
Überlauf-y: versteckt;

}

.kein Berühren .scrollbar.hover:hover {
Überlauf-y:auto;
Überlauf: sichtbar;
  
}


/* Logo-Hover-Eigenschaft */


.Einstellungen:Hover, Einstellungen:Fokus {   
  Hintergrund: URL (https://s17.postimg.org/74cl7s05b/logo_hover.jpg);
  -webkit-transition: alle 0,2 s Ein- und Ausblendung, Breite 0, Höhe 0, oben 0, links 0;
-moz-transition: alle 0,2 s Ein- und Ausblendung, Breite 0, Höhe 0, oben 0, links 0;
-o-Übergang: alle 0,2 s Ein- und Ausblendung, Breite 0, Höhe 0, oben 0, links 0;
Übergang: alle 0,2 s Ein- und Ausblendung, Breite 0, Höhe 0, oben 0, links 0; 
}

.Einstellungen:aktiv, Einstellungen:Fokus {   
  Hintergrund: URL (https://s3.postimg.org/bqfooag4z/startific.jpg);
  -webkit-transition: alle 0,1 s Ein- und Ausblendung, Breite 0, Höhe 0, oben 0, links 0;
-moz-transition: alle 0,1 s Ein- und Ausblendung, Breite 0, Höhe 0, oben 0, links 0;
-o-Übergang: alle 0,1 s Ein- und Ausblendung, Breite 0, Höhe 0, oben 0, links 0;
Übergang: alle 0,1 s Ein- und Ausblendung, Breite 0, Höhe 0, oben 0, links 0; 
}


a:schweben,a:fokus {
Textdekoration: keine;
Rahmen links: 0px durchgezogen #F7F7F7;



}

Navigation {
-webkit-Benutzerauswahl: keine;
-moz-Benutzerauswahl: keine;
-ms-Benutzerauswahl: keine;
-o-Benutzerauswahl: keine;
Benutzerauswahl: keine;
  
}

nav ul,nav li {
Umriss: 0;
Rand: 0;
Polsterung: 0;
Texttransformation: Großbuchstaben;
}




/* Dunkleres Element Seitenmenü Start*/


.darkerli
{
Hintergrundfarbe: #ededed;
Texttransformation: Großschreibung;  
}

.darkerlishadow
{
Hintergrundfarbe: #ededed;
Texttransformation: Großschreibung;  
-webkit-box-shadow: Einschub 0px 5px 5px -4px rgba(50, 50, 50, 0,55);
-moz-box-shadow: Einschub 0px 5px 5px -4px rgba(50, 50, 50, 0,55);
Box-Schatten: Einschub 0px 5px 5px -4px rgba(50, 50, 50, 0,55);
}


.darkerlishadowdown
{
Hintergrundfarbe: #ededed;
Texttransformation: Großschreibung;  
-webkit-box-shadow: Einschub 0px -4px 5px -4px rgba(50, 50, 50, 0,55);
-moz-box-shadow: Einschub 0px -4px 5px -4px rgba(50, 50, 50, 0,55);
Box-Schatten: Einschub 0px -4px 5px -4px rgba(50, 50, 50, 0,55);
}

/* Dunkleres Element am Seitenmenü Ende*/




.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
Farbe: #fff;
Hintergrundfarbe: #00bbbb;
Textschatten: 0px 0px 0px; 
}
.Bereich {
schweben: links;
Hintergrund: #e2e2e2;
Breite: 100 %;
Höhe: 100%;
}
@Schriftart {
  Schriftfamilie: „Titillium Web“;
  Schriftstil: normal;
  Schriftstärke: 300;
  Quelle: lokal('Titillium WebLight'), lokal('TitilliumWeb-Light'), URL(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) Format('woff');
}

Oben finden Sie den detaillierten Inhalt des von CSS3 implementierten seitlichen Schiebemenüs. Weitere Informationen zum seitlichen Schiebemenü in CSS3 finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

<<: So implementieren Sie die Vervollständigung leerer Zellen in HTML-Tabellen

>>: Beispiel zum Ändern des Zeilenabstands einer HTML-Tabelle