أثر أنواع مختلفة من شريط التوجيه باستخدام css3 وjquery

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

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

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>

<div class="content">الصفحة الرئيسية</div> </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 المترادف مع علامة a، ثم تغيير النمط المناسب، حيث تم استخدام طريقة window.location.href للحصول على عنوان الموقع الحالي للصفحة، باستخدام split() للقطع، فإن الجزء الأخير هو الذي نحتاجه. في الحالة العادية، ليس من الضروري مطابقة عنوان الموقع كاملاً، لذا تم استخدام طريقة substr() للتوافق مع بعض الأحرف الأولى. لقد أضفت على ملف css الخاص بي فئة on، من خلال إضافة 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>

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>

</li> <li> <a href="#">مدونة</a> <div class="nav-down"> <a href="#">مقالات رائعة</a> <a href="#">مقالات المدونة</a> <a href="#">خبراء المدونات</a> <a href="#">مدونتى</a>

</li> <li> <a href="#">المتجر</a> <div class="nav-down"> <a href="#">مكتبة البرمجيات</a> <a href="#">مكتبة C币</a> <a href="#">شحن C币</a>

</li> <li> <a href="#">تنزيل</a> <div class="nav-down"> <a href="#">تصنيف المصادر</a> <a href="#">مصادرى</a>

</li>

النوع الأول:تنفيذ باستخدام 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()
 });
});

قبل أن أتحدث عن طريقة التنفيذ، ذكرت أنني استخدمت في جزء التقليد لميزة تغيير المظهر لبaidu 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>

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

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

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

هذا هو محتوى المقال الكامل، نأمل أن يكون قد ساعدكم في التعلم، ونأمل أيضًا أن تدعموا وتشجعوا دروس الصراخ.

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