CSS+JQ实现炫酷导航栏_html/css_WEB-ITnose
一步一步的学习,后面再做个综合页面
1.当前页面高亮显示的导航栏
首先是HTML代码,很简单,ul+li实现菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>导航栏一</title></head><body> <header class="header"> <div class="nva"> <ul class="list"> <li><a href="Android.html">Android</a></li> <li><a href="C++.html">C++</a></li> <li><a href="IOS.html">IOS</a></li> <li><a href="Java.html">Java</a></li> <li><a href="Ruby.html">Ruby</a></li> </ul> </div> </header><h1 id="首页">首页</h1></body></html>
基本效果:
接下来设置CSS属性,这里要注意标签a是行级元素,所以需要用display转成块级元素,这个很常用,还有就是line-height的常见用法
*{ margin:0; padding: 0;}a{ text-decoration: none;}.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222;}.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none;}.list li{ float: left;}.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block;}.list li a:hover{ background:#333; color:#fff;}.list li a.on{ background:#333; color:#fff;}h1{ margin: 20px auto; text-align: center;}实现的效果:
最后就是JS动态添加定位效果了
js里面这样考虑,页面跳转就会有链接,根据链接的后缀来匹配属性,匹配则更改样式即可达到想要的效果
需要注意的就是如何获取URL,如何从URL里面查找出href信息
$(function(){ //当前链接以/分割后最后一个元素索引 var index = window.location.href.split("/").length-1; //最后一个元素前四个字母,防止后面带参数 var href = window.location.href.split("/")[index].substr(0,4); if(href.length>0){ //如果匹配开头成功则更改样式 $(".list li a[href^='"+href+"']").addClass("on"); //[attribute^=value]：匹配给定的属性是以某些值开始的元素。 }else { //默认主页高亮 $(".list li a[href^='index']").addClass("on"); }});效果图
2.划入自动切换的导航条
在1的基础上,修改一下HTMLa标签内容,然后通过CSS设置动画效果
<ul class="list"> <li><a href="index01.html"> <b>首页</b> <i>Index</i> </a></li> <li><a href="Android.html"> <b>Android</b> <i>安卓</i> </a></li> <li><a href="C++.html"> <b>C++</b> <i>谁加加</i> </a></li> <li><a href="IOS.html"> <b>IOS</b> <i>苹果</i> </a></li> <li><a href="Java.html"> <b>Java</b> <i>爪哇</i> </a></li> <li><a href="Ruby.html"> <b>Ruby</b> <i>如八一</i> </a></li> </ul>
CSS实现动画效果,首先把b和i标签都设置为块级元素,这样的话就可以垂直分布,再给a设置一个transition,所谓的动画,就是划入后改变把a上移,再给a加个边框好观察,看下图
最后想实现效果,就给包裹菜单的div设置一个溢出隐藏属性即可
*{ margin:0; padding: 0;}a{ text-decoration: none;}.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; overflow: hidden;}.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none;}.list li{ float: left;}.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; transition: 0.3s;} .list b,.list i{ display: block; }.list li a:hover{ margin-top: -40px; background:#333; color:#fff;}.list li a.on{ background:#333; color:#fff;}h1{ margin: 20px auto; text-align: center;}
也可以采用JQ来实现,代码如下
$(function () { $(".list a").hover(function () { //stop是当执行其他动画的时候停止当前的 $(this).stop().animate({ "margin-top": -40 }, 300); }, function () { $(this).stop().animate({ "margin-top": 0 }, 300); });});3.弹性子菜单实现
首先子菜单使用div包裹,里面都是a标签,如下
<li><a href="Android.html"> <b>Android</b> </a> <div class="down"> <a href="#">子菜单1</a> <a href="#">子菜单2</a> <a href="#">子菜单3</a> <a href="#">子菜单4</a> </div> </li>
接下来设置样式,既然是子菜单,就要脱离文档页面,所以使用absolute属性,使用这个属性那么父容器就要是relative
*{ margin:0; padding: 0;}a{ text-decoration: none;}.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; position: relative;}.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none;}.list li{ float: left;}.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; transition: 0.3s;}.list b{ display: block;}.list li a:hover{ background:#333; color:#fff;}.list li a.on{ background:#333; color:#fff;}.list .down{ position: absolute; top: 40px; background-color: #222; /*display: none;*/}.list .down a{ color: #aaa; padding-left: 30px; display: block;}h1{ margin: 20px auto; text-align: center;}如下效果:
接下来使用JQ和easing插件来控制动画
find方法一般用来查找操作元素的后代元素的
$(function () { $(".list li").hover(function () { //这里使用了easing插件 $(this).find(".down").stop().slideDown({duration:1000,easing:"easeOutBounce"}); }, function () { $(this).find(".down").stop().slideUp({duration:1000,easing:"easeOutBounce"}); });});效果,图片录制不太好,实际上都是弹性动画的
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1662
14
1418
52
1311
25
1261
29
1234
24
Adakah HTML mudah belajar untuk pemula?
Apr 07, 2025 am 12:11 AM
HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.
Memahami HTML, CSS, dan JavaScript: Panduan Pemula
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
HTML, CSS, dan JavaScript: Alat penting untuk pemaju web
Apr 09, 2025 am 12:12 AM
HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.
HTML: Struktur, CSS: Gaya, JavaScript: Tingkah Laku
Apr 18, 2025 am 12:09 AM
Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: 1. HTML mentakrifkan struktur laman web, 2. CSS mengawal gaya laman web, dan 3. JavaScript menambah tingkah laku dinamik. Bersama -sama, mereka membina kerangka, estetika dan interaktiviti laman web moden.
Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk Web
Apr 17, 2025 am 12:12 AM
Masa depan HTML penuh dengan kemungkinan yang tidak terhingga. 1) Ciri -ciri dan piawaian baru akan merangkumi lebih banyak tag semantik dan populariti komponen web. 2) Trend reka bentuk web akan terus berkembang ke arah reka bentuk yang responsif dan boleh diakses. 3) Pengoptimuman prestasi akan meningkatkan pengalaman pengguna melalui pemuatan imej yang responsif dan teknologi pemuatan malas.
HTML vs CSS vs JavaScript: Gambaran Keseluruhan Perbandingan
Apr 16, 2025 am 12:04 AM
Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.
Masa Depan HTML, CSS, dan JavaScript: Trend Pembangunan Web
Apr 19, 2025 am 12:02 AM
Trend masa depan HTML adalah semantik dan komponen web, trend masa depan CSS adalah CSS-in-JS dan CSShoudini, dan trend masa depan JavaScript adalah webassembly dan tanpa pelayan. 1. Semantik HTML meningkatkan kebolehcapaian dan kesan SEO, dan komponen web meningkatkan kecekapan pembangunan, tetapi perhatian harus dibayar kepada keserasian penyemak imbas. 2. CSS-in-JS meningkatkan fleksibiliti pengurusan gaya tetapi boleh meningkatkan saiz fail. Csshoudini membolehkan operasi langsung rendering CSS. 3.Webassembly mengoptimumkan prestasi aplikasi penyemak imbas tetapi mempunyai keluk pembelajaran yang curam, dan tanpa pelayan memudahkan pembangunan tetapi memerlukan pengoptimuman masalah permulaan sejuk.
