Heim > Artikel > Web-Frontend > So erzielen Sie mit CSS einen schwarzen Navigationsmenüeffekt mit Schatteneffekt
So erzielen Sie mit CSS einen schwarzen Navigationsmenüeffekt mit Schatteneffekt
- 不言Original
- 2018-06-11 15:45:411855Durchsuche
In diesem Artikel wird hauptsächlich CSS vorgestellt, um den schwarzen Navigationsmenüeffekt mit Schatteneffekt zu realisieren, und der Hintergrundbildwechseleffekt wird durch CSS festgelegt, um die Navigationsmenüfunktion mit Schatten zu realisieren. Freunde in Not können sich darauf beziehen
Das Beispiel in diesem Artikel beschreibt, wie man mithilfe von CSS einen schwarzen Navigationsmenüeffekt mit Schatteneffekt implementiert. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:
Dies ist eine CSS-Implementierung eines schwarzen Navigationsmenüs mit Schatteneffekt, das einen dreidimensionalen Effekt hat. Wenn Sie die Maus über das Menü bewegen, sehen Sie den Hintergrund des Menüs ändert sich. Es handelt sich um eine reine CSS-Code-Anwendung ohne Verwendung von JavaScript-Code. Wenn Sie das Gefühl haben, dass die Hintergrundfarbe und die Textfarbe des Menüs nicht Ihren Wünschen entsprechen, können Sie die CSS-Datei auch selbst ändern. Solange Sie kreativ sind, entsteht ein schönes Menü.
Der Screenshot des Laufeffekts lautet wie folgt:
Der spezifische Code lautet wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>黑色炫酷个人网站导航菜单</title>
<style>
.bg {background: url(images/button4.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(images/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; margin-top:100px;}
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right top;}
.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right top;}
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}
</style>
</head>
<body>
<p>
<ul class="menu">
<li class="top"><a href="#" class="top_link"><span>首页</span></a></li>
<li class="top"><a href="#" class="top_link"><span>我的相册</span></a></li>
<li class="top"><a href="#" class="top_link"><span>我的日志</span></a></li>
<li class="top"><a href="#" class="top_link"><span>我的音乐盒</span></a></li>
<li class="top"><a href="#" class="top_link"><span>我的介绍</span></a></li>
<li class="top"><a href="#" class="top_link"><span>留言本</span></a></li>
</ul>
</p>
</body>
</html>Das Obige ist das Ganze Ich hoffe, dass der Inhalt dieses Artikels für das Lernen aller nützlich sein wird. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
So lösen Sie das Problem der Lücken unter CSS-Bildern
So zeichnen Sie eine Kreis-Ladekreis-Animation mit CSS3
JS- und CSS-Code zur Implementierung von Hintergrundeffekten mit Farbverlauf
Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS einen schwarzen Navigationsmenüeffekt mit Schatteneffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Wie erstelle ich ein flüssiges 3- bis 1-Spalten-Layout ohne Medienabfragen?
- Wie verstecke ich Dateieingabeelemente und ersetze sie durch „Durchsuchen“-Schaltflächen?
- CSS: Einfacher Dunkelmodus
- Wie wandelt man Hover-Animationen in Klick-/Touch-Interaktionen für mobile Geräte um?
- Wie kann JavaScript den Dunkelmodus erkennen und auf Stripe-Elemente anwenden?