HTML導航欄

時間 2019-12-10

標籤 html 導航欄目 HTML 简体版

原文原文鏈接

先看效果（兩種，1：本身寫樣式，寫交互，2.用jQueryUI 的menu），以下圖javascript

第一種：第二種： css

第一種樣式：html

而後就開始準備了，單村用js和css也能夠寫出來，不過既然有jquery我就偷個懶吧java

1.去http://jquery.com/download/下載jqueryjquery

2.開始寫html測試

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> <!-- 設置編碼-->
	<link rel="stylesheet" type="text/css" href="css/style.css"><!-- 引用css樣式-->
	<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script><!-- 引入jquery-->
	<script type="text/javascript" src="js/js.js"></script><!--引入本身的js -->
	<title>菜單測試</title>
</head>
<body>
	<ul><!-- 菜單欄基本樣式-->
		<li class="hmain">
			<a href="#">菜單1</a>
			<ul>
				<li>
					<a href="#">子菜單1</a>
				</li>
				<li>
					<a href="#">子菜單2</a>
				</li>
			</ul>
		</li>
		<li class="hmain">
			<a href="#">菜單2</a>
			<ul>
				<li>
					<a href="#">子菜單1</a>
				</li>
				<li>
					<a href="#">子菜單2</a>
				</li>
			</ul>
		</li>
		<li class="hmain">
			<a href="#">菜單3</a>
			<ul>
				<li>
					<a href="#">子菜單1</a>
				</li>
				<li>
					<a href="#">子菜單2</a>
				</li>
			</ul>
		</li>
	</ul>
</body>
</html>

3.寫css樣式ui

ul,li{
	list-style: none; /*取消ul,li前面的小點 */
}
ul{
	padding: 0;   /*取消ul的縮進（默認會有一個縮進）*/
	margin: 0;
}

li{
	background-color: #eeeeee;
}
a{
	text-decoration: none;  /* 取消超連接的下劃線*/
	padding-left: 20px;
	display: block;
	width: 80px;
	padding-top:3px;
	padding-bottom: 3px;
}
.hmain{
	background-image: url(../images/title.jpg);  /* 設置導航背景*/
	background-repeat: repeat-x;  /* 設置背景圖片的排列方式*/
	width: 100px;
}
.hmain a{
	color: red;
}
.hmain li a{
	color: black;
}
.hmain ul{
	display: none;  /* 默認隱藏二級菜單欄*/
}

.hmain{
	float: left;   /* 導航定位（水平）*/
	margin-right: 2px;  
}

4到了交互的時候了本身的js,一句話搞定，先找到ul下的a，綁定鼠標滑過事件this

$(document).ready(function(){
var mean = $(".hmain>a");
mean.on("mouseenter mouseleave", function(){
var ulNode = $(this).next("ul");
      ulNode.toggle("normal");
});
});

初學者，有什麼不對的地方請指出，謝謝編碼

第二種樣式：url

而後就開始準備了，單村用js和css也能夠寫出來，不過既然有jquery我就偷個懶吧

1.去http://jquery.com/download/下載jquery(須要一個文件jquery-3.1.0.min.js)

去http://jqueryui.com/download/下載jqueryUI(須要兩個文件jquery-ui.min.js，jquery-ui.min.css)

2.開始寫html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> <!-- 設置編碼-->
    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script><!-- 引入jquery-->
    <script type="text/javascript" src="js/jquery-ui.min.js"></script><!-- 引入jqueryui-->
    <script type="text/javascript" src="js/js.js"></script><!--引入本身的js -->
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"><!-- 引用jqueryUIcss樣式-->
    <link rel="stylesheet" type="text/css" href="css/style.css"><!-- 引用css樣式-->
    <title>菜單測試</title>
</head>
<body>
    <ul class="menu"><!-- 菜單欄基本樣式-->
        <li class="hmain">
            <a href="#">菜單1</a>
            <ul>
                <li>
                    <a href="#">子菜單1</a>
                </li>
                <li>
                    <a href="#">子菜單2</a>
                </li>
            </ul>
        </li>
        <li class="hmain">
            <a href="#">菜單2</a>
            <ul>
                <li>
                    <a href="#">子菜單1</a>
                </li>
                <li>
                    <a href="#">子菜單2</a>
                </li>
            </ul>
        </li>
        <li class="hmain">
            <a href="#">菜單3</a>
            <ul>
                <li>
                    <a href="#">子菜單1</a>
                </li>
                <li>
                    <a href="#">子菜單2</a>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

3.寫css樣式

ul,li{
    list-style: none; /*取消ul,li前面的小點 */
}
ul{
    padding: 0;   /*取消ul的縮進（默認會有一個縮進）*/
    margin: 0;
}

li{
    background-color: #eeeeee;
}
a{
    text-decoration: none;  /* 取消超連接的下劃線*/
    padding-left: 20px;
    display: block;
    width: 80px;
    padding-top:3px;
    padding-bottom: 3px;
}
.hmain{
    width: 100px;
}
.hmain a{
    color: red;
}
.hmain li a{
    color: black;
}
.hmain ul{
    display: none;  /* 默認隱藏二級菜單欄*/
}

.hmain{
    float: left;   /* 導航定位（水平）*/
    margin-right: 2px;  
}

4.交互

$(document).ready(function(){
var menu = $(".menu");
menu.menu({position:{at: "left bottom"}});
});

很簡單啦

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。