Heim > Artikel > Web-Frontend > jQuery und CSS3 realisieren das Navigationsmenü mit fester oberer Position und schwebendem Effekt im nachgeahmten Blütenblattnetzwerk
jQuery und CSS3 realisieren das Navigationsmenü mit fester oberer Position und schwebendem Effekt im nachgeahmten Blütenblattnetzwerk
- 不言Original
- 2018-06-25 16:44:322188Durchsuche
In diesem Artikel wird hauptsächlich die jQuery + CSS3-Implementierung eines Navigationsmenüs mit einer festen oberen Position und einem schwebenden Effekt vorgestellt, der das Blütenblattnetzwerk imitiert. Es kann die Funktion der horizontal schwebenden und oben fixierten Navigationsleiste nach dem Verschieben der Seite realisieren unten. Es handelt sich um eine jQuery-Ereignisantwort und eine Seite. Für Bedienungstipps im Zusammenhang mit der dynamischen Änderung von Elementattributen können sich Freunde mit Bedarf an
wenden. Dieser Artikel beschreibt das Beispiel der jQuery + CSS3-Implementierung eines Navigationsmenüs mit einer festen oberen Position und ein schwebender Effekt, der das Blütenblattnetzwerk imitiert. Teilen Sie es allen als Referenz mit. Die Einzelheiten lauten wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>【推荐】Jquery+CSS3仿花瓣网固定顶部位置悬浮的导航菜单</title>
<style type="text/css">
body,h1,ul{margin:0;}
ul li{list-style-type:none;}
#header{width:100%;border-top:solid 1px #ccc;border-bottom:solid 1px #ccc;text-align:center;}
h1{padding:10px 0;color:#D74452;}
.nav{width:1000px;background:#fff;margin:20px auto 0;border:solid 1px #ccc;zoom:1;border-radius:5px;box-shadow:0 1px 6px rgba(0,0,0,0.1);color:#D74452;}
.nav_scroll{position:fixed;width:100%;margin:0;left:0;top:0;}
.nav:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
.nav ul li{float:left;margin:0 20px;height:30px;line-height:30px;}
.nav ul li a{cursor:pointer;}
.nav ul li a:hover{text-decoration:underline;}
h2{height:400px;line-height:400px;}
</style>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var topMain=$("#header").height()+20//是头部的高度加头部与nav导航之间的距离
var nav=$(".nav");
$(window).scroll(function(){
if ($(window).scrollTop()>topMain){//如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll，否则就移除
nav.addClass("nav_scroll");
}else{
nav.removeClass("nav_scroll");
}
});
})
</script>
</head>
<body>
<p id="header"><h1>花瓣</h1></p>
<p class="nav">
<ul>
<li><a>关注</a></li>
<li><a>最新</a></li>
<li><a>最热</a></li>
<li><a>视频</a></li>
<li><a>家居</a></li>
<li><a>旅行</a></li>
</ul>
</p>
<p style="background:#f9f9f9;color:#000;" id="cont">
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
<h2>6</h2>
<h2>7</h2>
<h2>8</h2>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
<h2>6</h2>
<h2>7</h2>
<h2>8</h2>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
<h2>6</h2>
<h2>7</h2>
<h2>8</h2>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
<h2>6</h2>
<h2>7</h2>
<h2>8</h2>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
<h2>6</h2>
<h2>7</h2>
<h2>8</h2>
</p>
</body>
</html>
Das Betriebseffektdiagramm lautet wie folgt:
Oben ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
JavaScript Und der Code zum Zeichnen einer kleinen Person mit HTML5-Leinwand
Das obige ist der detaillierte Inhalt vonjQuery und CSS3 realisieren das Navigationsmenü mit fester oberer Position und schwebendem Effekt im nachgeahmten Blütenblattnetzwerk. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!