CSS를 사용하여 그림자 효과로 검은색 탐색 메뉴 효과를 얻는 방법
- 不言원래의
- 2018-06-11 15:45:411884검색
이 글에서는 그림자 효과로 검은색 탐색 메뉴 효과를 구현하기 위한 CSS를 주로 소개하고, 그림자로 탐색 메뉴 기능을 구현하기 위해 CSS를 통해 배경 이미지 전환 효과를 설정하는데 필요한 친구들은 이 글을 참고하세요.
예제에서는 CSS를 사용하여 그림자 효과가 있는 검정색 탐색 메뉴 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
그림자 효과를 적용한 검정색 탐색 메뉴를 CSS로 구현한 것으로, 메뉴에 마우스를 올리면 메뉴의 배경이 바뀌는 것을 볼 수 있습니다. JavaScript 코드를 사용하지 않는 순수한 CSS 코드 응용 프로그램입니다. 메뉴의 배경색과 텍스트 색상이 원하는 색상이 아니라고 생각된다면 CSS 파일을 직접 수정하여 창의력을 발휘하면 아름다운 메뉴가 탄생할 것입니다.
런닝 효과의 스크린샷은 다음과 같습니다.
구체적인 코드는 다음과 같습니다.
<!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>위 내용은 모두의 학습에 도움이 되기를 바랍니다. 내용이 있으니 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
그라데이션 배경 효과를 구현하는 JS 및 CSS용 코드
위 내용은 CSS를 사용하여 그림자 효과로 검은색 탐색 메뉴 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.