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

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:

jQuery, HTML5 und CSS3 implementieren die Funktion eines aktualisierungslosen Formulars mit abgerundeten Ecken und Eingabevalidierung

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!

php JavaScript html5 jquery css3 事件 canvas

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：jQuery, HTML5 und CSS3 implementieren die Funktion eines nicht aktualisierten Formulars mit abgerundeten Ecken und EingabevalidierungNächster Artikel：jQuery, HTML5 und CSS3 implementieren die Funktion eines nicht aktualisierten Formulars mit abgerundeten Ecken und Eingabevalidierung

In Verbindung stehende Artikel

Mehr sehen