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:411799Durchsuche

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!

php JavaScript css css3 JS

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So lösen Sie das Problem der Lücken unter CSS-BildernNächster Artikel：So lösen Sie das Problem der Lücken unter CSS-Bildern

In Verbindung stehende Artikel

Mehr sehen