English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. الموقع الحالي
  2. الصفحة الرئيسية
  3. ملاحظات الخبرة
  4. نص المقال

تحقيق نموذج قائمة التوجيه الشائع باستخدام jQuery وCSS3 (تفسير مفصل)

يستخدم الشريط التوجيهي بشكل واسع، وكل موقع يستخدم شريط توجيهي له طابع خاص. مؤخرًا، قمت بدراسة أنواع مختلفة من الشريط التوجيهي، مثل الشريط التوجيهي المبرز، الشريط التوجيهي المتغير بين اللغتين الصينية والإنجليزية، الشريط التوجيهي مع الحركة المرنة، وحتى الشريط التوجيهي مع الحركة بالارتجاف (تحت النص خط أفقي). كل نوع من الشريط التوجيهي له طابع خاص، مثل الشريط التوجيهي المبرز يبدو بسيطًا، ولكن تأثيره مرئي جيد، والشريط التوجيهي مع الحركة المرئية له تأثير مرئي جيد أيضًا.

سيتم تقديم أربعة أنواع من الشريط التوجيهي الذي يستخدم بشكل واسع، وهي: الشريط التوجيهي المبرز، الشريط التوجيهي المتغير بين اللغتين الصينية والإنجليزية، الشريط التوجيهي مع الحركة المرنة، والشريط التوجيهي مع الحركة بالارتجاف.

1. الشريط التوجيهي المبرز

هذا الشريط التوجيهي: عند النقر على أي توجيه، يتم تحديد الظلال، والآخرين يظلون بالطريقة الافتراضية، مما يعني أنه دون تغيير رموز CSS للقائمة، يتم التحكم في خلفية القائمة باستخدام Js، إذا تم النقر على عنصر القائمة، يتم منحه لون خلفية أو صورة خلفية مختلفة، مما يمكن من توجيه المستخدمين بشكل واضح إلى الأقسام التي يزورونها في الموقع، وهو بسيط وسهل ويوفر تأثيرًا جيدًا.

الشكل التالي هو النتيجة:}


html: (هنا تم تجاهل كود html لأي ملفات أخرى، فقط تم تقديم كود index.html)

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>الصفحة الرئيسية</title> 
<link href="../css/demo1.css" rel="stylesheet" type="text/css"> 
<script src="../js/jquery-3.1.0.min.js" language="javascript" charset="utf-8"></script> 
<script src="../js/demo1.js" language="javascript" charset="utf-8"></script> 
</head> 
<body> 
<div class="nav"> 
<ul class="nav-list"> 
<li><a href="index.html">首页</a></li> 
<li><a href="bbs.html">论坛</a></li> 
<li><a href="blog.html">博客</a></li> 
<li><a href="mall.html">商城</a></li> 
<li><a href="download.html">下载</a></li> 
</ul> 
</div> 
<div class="content">الصفحة الرئيسية</div> 
</body> 
</html>

css：

*{ 
margin:0px; 
padding:0px; 
font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; 
}); 
.nav{ 
background-color: #222; 
height: 40px; 
width:100%; 
margin-top:50px; 
}); 
.nav-list{ 
width: 1000px; 
margin: 0 auto; 
}); 
.nav-list li{ 
list-style: none; 
float: left; 
}); 
.nav-list li a{ 
color: #aaa; 
padding:0 40px; 
text-decoration: none; 
line-height: 40px; 
display: block; 
border: none; 
}); 
.content{ 
margin:20px auto; 
text-align: center; 
}); 
.nav-list li a:hover{ 
color: #fff; 
background: #504d4d; 
}); 
<span style="color:#ff0000;">.nav-list li a.on{ 
color: #fff; 
background: #504d4d; 
}</span>

jquery:

$(function(){ 
var index = (window.location.href.split("/").length)-1; 
var href = window.location.href.split("/")[index].substr(0,4); 
if (href!=null){ 
$(".nav-list li a[href^='"+href+"']").addClass("on"); 
} 
$(".nav-list li a[href='index.html']").addClass("on"); 
}); 
});

من بين النقاط الرئيسية التي يتم التعامل معها كيفية التحقق من عنوان الصفحة الحالية للصفحة وتطابق علامة التتبع href، ثم تغيير النمط بشكل مناسب، هنا تم استخدام طريقة window.location.href للحصول على عنوان الموقع الحالي للصفحة، باستخدام split() لقطع، والجزء الأخير من المحتوى هو الذي نريده. في الحالة العادية، لا تحتاج إلى مطابقة العنوان بالكامل، لذا تم استخدام طريقة substr() لمطابقة الأحرف الأولى فقط. لقد أضفت فئة on في ملف css، من خلال إضافة class=

2、التبديل بين اللغة الصينية والإنجليزية في قائمة التوجيهات

دعنا نرى أولاً الصورة التوضيحية:


لقد استخدمت طريقتين لتحقيق هذا، الأولى باستخدام css3، والثانية باستخدام jquery.

أولاً، دعنا نتحدث عن كيفية تحقيق هذا باستخدام css3:

html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>الصفحة الرئيسية</title> 
<link rel="stylesheet" href="../css/demo2.css"> 
</head> 
<body> 
<div class="nav"> 
<ul class="nav-list"> 
<li> 
<a href="index.html"> 
<b>الصفحة الرئيسية</b> 
<i>الصفحة الرئيسية</i> 
</a> 
</li> 
<li> 
<a href="index.html"> 
<b>المجتمع</b> 
<i>المجتمع</i> 
</a> 
</li> 
<li> 
<a href="index.html"> 
<b>الموقع</b> 
<i>الموقع</i> 
</a> 
</li> 
<li> 
<a href="index.html"> 
<b>المتجر</b> 
<i>المتجر</i> 
</a> 
</li> 
<li> 
<a href="index.html"> 
<b>تحميل</b> 
<i>تحميل</i> 
</a> 
</li> 
</ul> 
</div> 
</body> 
</html>

css:

*{ 
margin:0px; 
padding:0px; 
font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; 
}); 
li{ 
list-style: none; 
}); 
a{ 
text-decoration: none; 
}); 
.nav{ 
width:100%; 
height: 40px; 
background-color: #222; 
margin-top:100px; 
overflow: hidden; 
}); 
.nav-list{ 
width:1000px; 
margin:0 auto; 
height: 40px; 
}); 
.nav-list li { 
float: left; 
}); 
.nav-list li a{ 
display: block; 
transition: 0.2s; 
}); 
.nav-list li b,.nav-list li i{ 
color:#aaa; 
line-height: 40px; 
display: block; 
padding:0 30px; 
text-align: center; 
}); 
.nav-list li b{ 
font-weight:normal; 
}); 
.nav-list li i{ 
font-style: normal; 
color:#fff; 
background-color: #333; 
}); 
.nav-list li a:hover{ 
margin-top:-40px; 
});

الجزء الأحمر هو تنفيذ هذا العمل، باستخدام تغيير المواضع، عندما يتحرك الفأرة عليه، يتم عرض اللغة الصينية، أي نقل اللغة الإنجليزية بعيدًا. من المهم ملاحظة أنه يجب استخدام خاصية overflow: hidden لتخفيضه. إذا كنت ترغب في جعل السرعة أبطأ قليلاً، يمكنك استخدام خاصية transition لضبط وقت التغيير، مما يقلل من سرعة التغيير.

接着是用jquery实现：

css：

*{ 
margin:0px; 
padding:0px; 
font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; 
}); 
li{ 
list-style: none; 
}); 
a{ 
text-decoration: none; 
}); 
.nav{ 
width:100%; 
height: 40px; 
background-color: #222; 
margin-top:100px; 
overflow: hidden; 
}); 
.nav-list{ 
width:1000px; 
margin:0 auto; 
height: 40px; 
}); 
.nav-list li { 
float: left; 
}); 
.nav-list li a{ 
display: block; 
}); 
.nav-list li b,.nav-list li i{ 
color:#aaa; 
line-height: 40px; 
display: block; 
padding:0 30px; 
text-align: center; 
}); 
.nav-list li b{ 
font-weight:normal; 
}); 
.nav-list li i{ 
font-style: normal; 
color:#fff; 
background-color: #333; 
});

jquery:

$(function(){ 
$(".nav-list li a").hover(function(){ 
$(this).stop().animate({"margin-top":-40},200) 
},function(){ 
$(this).stop().animate({"margin-top":0},200) 
}); 
});

النقطة الرئيسية لتنفيذ الوظيفة هي وظيفة animate()، من خلال ضبط margin-top والزمن، من أجل منع التغيير السريع لكل منهم (كما هو موضح في الشكل التالي)، يجب إضافة وظيفة stop() قبل وظيفة animate()، أي قبل بدء جميع الحركات، يجب وقف جميع الحركات الأخرى أولاً، ثم بدء هذه الحركة.

3- شريط التصفح مع حركة تدرجية

لقد استخدمت ثلاث طرق لتنفيذ ذلك، الطريقة الأولى هي CSS3، الطريقة الثانية هي jQuery، والطريقة الثالثة هي jQuery easing.

بسبب أن التخطيط الثلاثة متشابه، لذا سأرفع كود بنية HTML مباشرة.

html:

<div class="nav"> 
<ul class="nav-list"> 
<li> 
<a href="#">الصفحة الرئيسية</a> 
</li> 
<li> 
<a href="#">المنتدى</a> 
<div class="nav-down"> 
<a href="#">منتدى Java</a> 
<a href="#">منتدى JS</a> 
<a href="#">منتدى jQuery</a> 
<a href="#">منتدى CSS3</a> 
</div> 
</li> 
<li> 
<a href="#">المدونة</a> 
<div class="nav-down"> 
<a href="#">المقالات الرائعة</a> 
<a href="#">مقالات المدونة</a> 
<a href="#">خبراء المدونة</a> 
<a href="#">مدونتى</a> 
</div> 
</li> 
<li> 
<a href="#">المتجر</a> 
<div class="nav-down"> 
<a href="#">مكتبة البرمجيات</a> 
<a href="#">مكتبة C币</a> 
<a href="#">شحن C币</a> 
</div> 
</li> 
<li> 
<a href="#">تحميل</a> 
<div class="nav-down"> 
<a href="#">تصنيف المصادر</a> 
<a href="#">مصادرى</a> 
</div> 
</li> 
</ul> 
</div>

الطريقة الأولى: باستخدام CSS3.

*{ 
margin:0px; 
padding:0px; 
font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; 
}); 
li{ 
list-style: none; 
}); 
a{ 
text-decoration: none; 
}); 
.nav{ 
width:100%; 
height: 40px; 
margin-top:50px; 
background-color: #222; 
}); 
.nav .nav-list{ 
width: 1000px; 
height: 40px; 
margin:0 auto; 
}); 
.nav .nav-list li{ 
float: left; 
position: relative; 
}); 
.nav .nav-list li > a{ 
display: block; 
height: 40px; 
line-height: 40px; 
padding:0 30px; 
color:#aaa; 
width:60px; 
}); 
.nav .nav-list li:hover>a{ 
color:#fff; 
background-color: #333; 
}); 
<span style="color:#ff0000;">.nav .nav-list li:hover .nav-down{ 
display: block; 
}</span> 
.nav-down{ 
width:150px; 
background-color: #333; 
position: absolute; 
top:40px; 
left:0px; 
display: none; 
}); 
.nav .nav-list .nav-down a{ 
display: block; 
line-height: 30px; 
color:#aaa; 
padding-left:30px; 
}); 
<span style="color:#ff0000;">.nav .nav-list .nav-down a:hover{ 
color:#fff; 
background-color: #333; 
}</span>

طريقة التنفيذ بسيطة جدًا، حيث يجب على البداية إخفاء القائمة المنسدلة، ثم عرض القائمة المخفية عند مرور الفأرة، كما هو موضح في جزء الأحمر من الكود أعلاه، لن أشرح ذلك بشكل مفصل، الكود بسيط جدًا.

الطريقة الثانية: باستخدام jQuery.

css:

*{ 
margin:0px; 
padding:0px; 
font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; 
}); 
li{ 
list-style: none; 
}); 
a{ 
text-decoration: none; 
}); 
.nav{ 
width:100%; 
height: 40px; 
margin-top:50px; 
background-color: #222; 
}); 
.nav .nav-list{ 
width: 1000px; 
height: 40px; 
margin:0 auto; 
}); 
.nav .nav-list li{ 
float: left; 
position: relative; 
}); 
.nav .nav-list li > a{ 
display: block; 
height: 40px; 
line-height: 40px; 
padding:0 30px; 
color:#aaa; 
width:60px; 
}); 
.nav .nav-list li:hover>a{ 
color:#fff; 
background-color: #333; 
}); 
.nav-down{ 
width:150px; 
background-color: #333; 
position: absolute; 
top:40px; 
left:0px; 
display: none; 
}); 
.nav .nav-list .nav-down a{ 
display: block; 
line-height: 30px; 
color:#aaa; 
padding-left:30px; 
}); 
.nav .nav-list .nav-down a:hover{ 
color:#fff; 
background-color: #333; 
});

jquery:

$(function(){ 
$(".nav .nav-list li").hover(function(){ 
$(this).find(".nav-down").stop().slideDown() 
},function(){ 
$(this).find(".nav-down").stop().slideUp() 
}); 
});

تم مناقشة الطريقة قبل ذلك، في جزء التمثيل البديل لـ Baidu، هنا تم استخدام طرق slideDown() و slideUp()، إذا كنت ترغب في تعيين وقت التغيير، يمكنك إدخال الوقت مباشرة في الباريتة.

الطريقة الثالثة: باستخدام jquery.easing.

نمط css هو نفس النمط الذي يتم تنفيذه باستخدام jquery، لذا لن أكرر هنا إعادة التكرار.

jquery:

<pre name="code" class="javascript">$(function(){ 
$(".nav .nav-list li").hover(function(){ 
$(this).find(".nav-down").stop().slideDown({duration:500,easing:"easeOutBounce"}) 
},function(){ 
$(this).find(".nav-down").stop().slideUp({duration:500,easing:"easeOutBounce"}) 
}); 
});

عند استخدام هذا الأسلوب، تذكر إدخال مكتبة jquery.easing.1.3.min.js (استخدمت هذه النسخة، يمكن للجميع تنزيلها من الإنترنت). سأوضح هنا النهج: عند تحريك الفأرة، تنزل القائمة التدحرجة بسهولة، وعند تفريغ الفأرة، تنزل القائمة التدحرجة بسهولة، وقد تم استخدام الطرق slideDown() و slideUp() التي ذكرت سابقًا، ولكن الفرق الوحيد هو إضافة الحركة، أي استخدام easing، وهو شبيه بتنسيق json، يمكن إدراج duration و easing فقط، إذا لم تفهم عملية التنفيذ، يمكنك البحث في الوثائق ذات الصلة لمعرفة كيفية القيام بذلك.

4-شريط التوجيه المتتبع للحركة بالتماسك

الطريقة التي يمكن من خلالها تحقيق ذلك هي: تحريك السطر العرضي إلى أسفل النص الحالي. لذلك، يجب الحصول على موقع الحركة الحالية للفأرة، أي top وleft، ثم تغيير top وleft للشريط العرضي بشكل متناسب يمكن تحقيق ذلك، والتحقيق في ذلك كما يلي.
html:（这里只贴上一个页面的代码）

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>摩擦运动动画跟随的导航条</title> 
<link href="../css/demo7.css" rel="stylesheet"> 
<script src="../js/jquery-3.1.0.min.js" language="javascript" charset="utf-8"></script> 
<script src="../js/jquery.easing.1.3.min.js" language="javascript" charset="utf-8"></script> 
<script src="../js/demo7.js" language="javascript" charset="utf-8"></script> 
</head> 
<body> 
<div class="nav"> 
<div class="nav-content"> 
<ul class="nav-list"> 
<li><a href="index.html">首页</a></li> 
<li><a href="bbs.html">论坛</a></li> 
<li><a href="blog.html">博客</a></li> 
<li><a href="mall.html">商城</a></li> 
<li><a href="download.html">下载</a></li> 
</ul> 
<div class="nav-line"></div> 
</div> 
</div> 
</body> 
</html>

css:

*{ 
margin:0px; 
padding: 0px; 
font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; 
}); 
li{ 
list-style: none; 
}); 
a{ 
text-decoration: none; 
}); 
.nav{ 
width:100%; 
height:40px; 
margin-top:50px; 
background-color: #f6f6f6; 
}); 
.nav .nav-content{ 
width:1000px; 
margin:0 auto; 
height: 40px; 
position: relative; 
}); 
.nav .nav-list li{ 
float: left; 
}); 
.nav .nav-list li a{ 
color:#333; 
height: 40px; 
line-height: 40px; 
display: block; 
padding:0 30px; 
}); 
.nav .nav-line{ 
height:3px; 
background: #35b558; 
width:100px; 
position: absolute; 
top:40px; 
left:0px; 
}); 
.nav .nav-list li a:hover{ 
color:#35b558; 
}); 
.nav .nav-list li a.on{ 
color:#35b558; 
});

jquery:

$(function () { 
var index = (window.location.href).split("/").length-1; 
var href = (window.location.href).split("/")[index]; 
($(".nav .nav-list li a[href='"+href+"']")).addClass("on"); 
var li_width = ($(".nav .nav-list li a.on")).outerWidth(); 
var li_left = ($(".nav .nav-list li a.on")).position().left; 
($(".nav-content .nav-line")).css({width:li_width,left:li_left}); 
$(".nav .nav-list li").hover(function(){ 
var li_width = $(this).outerWidth(); 
var li_left = $(this).position().left; 
$(".nav-content .nav-line").stop().animate({"width":li_width,"left":li_left},{duration:1500,easing:"easeOutElastic"}); 
},function(){ 
$(".nav-content .nav-line").stop().animate({"width":li_width,"left":li_left},{duration:1500,easing:"easeOutElastic"}); 
}); 
});

سأحاول شرح دور بعض الطرق:

1) الحصول على عرض العنصر باستخدام outerwidth() (بما أن عدد الكلمات المختلفة، فإن العرض مختلف أيضًا، لجعل الشريط يتناسب مع عرض النص، يجب أن يكون الشريط مروناً مع عرض النص)；

2) الحصول على قيمة left في موقع العنصر باستخدام position().left;

3) تنفيذ تأثير الحركة من خلال animate();

4) duration و easing هي محتويات مكتبة easing jQuery، وهي تعيين تأثير الحركة.

ما ذكرته أعلاه هو شرح مفصل لعدة أمثلة لإنشاء قوائم توجيهية مستخدمة jQuery وCSS3، آمل أن يكون هذا مفيدًا لكم، إذا كان لديكم أي أسئلة، فلا تترددوا في ترك تعليق، وسأقوم بالرد على أسئلتكم في أقرب وقت، وأشكركم أيضًا على دعمكم لموقع呐喊 لتعليمات البرمجة!

البيان: محتوى هذا المقال تم جمعه من الإنترنت، ملكية الحقوق للمالك الأصلي، تم جمع المحتوى من قبل المستخدمين عبر الإنترنت وتم تحميله بشكل مستقل، لا يمتلك هذا الموقع حقوق الملكية، لم يتم تعديل المحتوى بشكل إنساني، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا وجدت محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لإبلاغنا، وقدم الدليل على الدليل، إذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فورًا.

تعليمية الأساس
توصياتك