超級簡單的導航選單效果！
阿新 • • 發佈：2018-12-27
閱讀本篇文章大約花費您1-3分鐘！
最近剛剛結束了資料庫的課程設計，因為正好學了JavaWeb，就做了一個簡單的管理系統，於是想著做一個選單導航欄，可以將所有的功能都放在這個導航欄中，因為還沒有學前端的框架，就直接用JS寫了一個簡單的效果：
今天就和大家分享一下這個簡單的效果的製作方法吧!
一.準備工作
準備工作非常簡單：
下載好JQuery，放在eclipse的WebContent下，也可以建一個資料夾放在裡面。
官網下載地址：https://jquery.com/
二.開始操作啦
新建一個test.jsp檔案，匯入Jquery檔案
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
然後，直接看程式碼吧
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div { width: 250px; } .content { margin-left: 20px; margin-top: 10px; width: 250px; height: 300px; background: #3E89C6; padding: 5px; border-radius: 10px; } ul { list-style: none; } .subTitle { width: 200px; height: 35px; background-color: silver; border: 1px solid black; border-radius: 5px; } .subTitle:hover { background-color: yellow; } .item { width: 200px; margin: 10px; } #subItem { width: 200px; display: none; } li { background-color: lightgray; border: 1px solid black; border-radius: 5px; margin: 3px; } li:hover{ font-weight: bold; } </style> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function() { $(".subTitle").click(function() { var $temp = $(this).next(); if ($temp.css("display") == "none") { $temp.css("display", "block"); } else { $temp.css("display", "none"); } }); $(".subTitle").hover(function() { $(this).children("font").css("font-weight", "bold") }, function() { $(this).children("font").css("font-weight", "normal"); }); }); </script> </head> <body> <div class="content"> <div class="item"> <div class="subTitle" height="100px"> <font size="4">標題1</font> </div> <div id="subItem"> <ul> <li>子標題1</li> <li>子標題2</li> <li>子標題3</li> </ul> </div> </div> </div> </body> </html>
原理也很簡單，就是給標題1新增一個點選事件，然後切換子標題的display樣就可以了。
為了稍微好看一點，我這裡還在點選的同時加粗了標題的字型，在結合CSS樣式，給點顏色，一個非常簡單的導航選單就做好了。加入標題只需要多寫幾個<div class="item">就可以，不要改變id,class等，只需要修改顯示的內容就可以了。