二级菜单作业

最新推荐文章于 2022-02-14 21:57:47 发布
最新推荐文章于 2022-02-14 21:57:47 发布
阅读量201 收藏
点赞数
分类专栏： 作业

1css 做导航做二级导航
2js做导航栏二级
3了解jQ

<html><head>
<meta charset="UTF-8">
<style>
	*{margin:0;padding:0} 
	#nav{/*background-color:darkgrey;*/width:600px;height:40px;margin:0 auto;}
	ul {list-style:none;}
	/*ul {list-style:none;text-decoration:none;float:left;line-height:20px;text-align:center:position:absolute;}*/
	ul li{float:left;line-height:40px;text-align:center:position:relative;}
	a{text-decoration:none;color: #33b5e5;padding:0 20px;/*width:100px;*/display:block;}
	a:hover{background-color: #78a95c;color:#77e55d}
	ul li ul{position:absolute; top:40px;left:0px; display:none;}
	ul li ul li{float:none;/*width:100px;*/background-color:blueviolet;margin:1px 0;/*display:none;*/}
	ul li ul li a{/*padding:0;*/ background:#00ff00}
	ul li:hover ul /*li*/{display:block;}
</style>
</head><body>
<div id="nav">
	<ul>
		<li><a href="#">1</a><ul>
				<li><a href="#">31</a><!--<ul>
					<li><a href="#">web3</a></li>
					<li><a href="#">web4</a></li>
					<li><a href="#">web5</a></li>
				</ul>--></li>
				<li><a href="#">41</a></li>
				<li><a href="#">51</a></li>

				</ul></li>
		<li><a href="#">2</a>
			<ul><li><a href="#">312</a><!--<ul>
					<li><a href="#">web3</a></li>
					<li><a href="#">web4</a></li>
					<li><a href="#">web5</a></li>
				</ul>--></li>
				<li><a href="#">412</a></li>
				<li><a href="#">512</a></li>

				</ul></li>
		<li><a href="#">3</a><ul>
				<li><a href="#">313</a><!--<ul>
					<li><a href="#">web3</a></li>
					<li><a href="#">web4</a></li>
					<li><a href="#">web5</a></li>
				</ul>--></li>
				<li><a href="#">413</a></li>
				<li><a href="#">513</a></li>

			</ul></li>
		<li><a href="#">4</a><ul>
				<li><a href="#">314</a><!--<ul>
					<li><a href="#">web3</a></li>
					<li><a href="#">web4</a></li>
					<li><a href="#">web5</a></li>
				</ul>--></li>
				<li><a href="#">414</a></li>
				<li><a href="#">514</a></li>

			</ul></li>
		<li><a href="#">5</a><ul>
				<li><a href="#">315</a><!--<ul>
					<li><a href="#">web3</a></li>
					<li><a href="#">web4</a></li>
					<li><a href="#">web5</a></li>
				</ul>--></li>
				<li><a href="#">415</a></li>
				<li><a href="#">515</a></li>

			</ul></li>
	</ul>
</div>
</body></html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.3.min.js">/*引用库、*/

    </script>

</head>
<body>
<p>asd</p><p>asd</p><p>asd</p>
<span>asdasd</span><span>asdasd</span><span>asdasd</span>
<script>
    var p1= document.getElementsByTagName("p");
    for(var i=0; i<p1.length ;i++){
        p1[i].style.backgroundColor = '#CCC'
        p1[i].style.width = '50px'
        p1[i].style.height = '50px'

    }
    $("a").css({color:"#ff0011",background:"blue"});
    $("span").css("background","red").css('color','blue');
</script>
</body>
</html>
<html><head>
<style>
	*{margin:0;padding:0}
	#nav{	background-color:#c5cce5; width: 600px; height: 40px; margin: 0 auto;}
	ul{list-style:none}
	ul li{float: left;line-height: 40px;text-align:center;position:relative}
	a{text-decoration:none;color: #78a95c;padding:0 10px;/*width:100px;*/display:block;}
	a:hover{background-color: #78a95c;color:#77e55d}
	ul li ul li{float:none;/*width:100px;*/background-color:#77e55d;margin-top:2px 0;/*display:none;*/}
	ul li ul {/*padding:0;*/ background:#00ff00;position:absolute;left:0px;top:40px;display:none}
	ul li ul a:hover /*li*/{/*display:block;*/background-color:blueviolet}
</style>

<script>
function show(li){
	var ul = li.getElementsByTagName("ul")[0]
	console.log(ul)
	ul.style.display = 'block';

}
function hide(li){
	var ul = li.getElementsByTagName("ul")[0]/*集合。可返回带有指定标签名的对象的集合。*/
	console.log(ul)
	ul.style.display = 'none';


}
</script>
</head>
<body>
<div id="nav">
	<ul>
		<li><a href="#">首页</a></li>
		<li "show(this)" "hide(this)"><a href="#">10</a>
		<ul>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
		</ul></li>
		<li "show(this)" "hide(this)"><a href="#">11</a>
		<ul>
			<li><a href="#">12</a></li>
			<li><a href="#">22</a></li>
			<li><a href="#">32</a></li>
			<li><a href="#">42</a></li>
		</ul></li>
		<li><a href="#">首页1</a></li>
		<li><a href="#">首页2</a></li>
	</ul>
</div>
</body>
</html>
细看猥琐猴
关注
专栏目录
jq实现二级菜单/下拉菜单
deliefu3790的博客
06-22 805
https://www.cnblogs.com/sandraryan/ 不是很难，直接上代码~ 有写注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt...
jQuery一级菜单和二级菜单
wen0627的博客
05-07 3472
1、先做一级菜单，第一步设置body，把大概样子写出来。 2、第二步-1、用css设置通配符。 3、第二步-2、设置ul标签基础样式 。 4、第二步-3、设置类样式。 5、设置jquery内容的第一步先引入jQuery文件。 6、第二步设置一个函数在里面放入我们要设置成的效果，获取文档在在载入页面是的效果，绑定类设置鼠标移入展示一级菜单内容，鼠标移出隐藏内容。 7、一级菜单的说完了，现在来说二级菜单的内容怎么设置移入显示然后在移入下一个就显示下一个隐藏上一个...
JavaScript0330笔记
SectSrms_Lee的博客
03-30 172
1.js二级导航 <html><head> <style> *{margin:0;padding:0} #nav{ background-color:#c5cce5; width: 600px; height: 40px; margin: 0 auto;} ul{list-style:none} ul li{float: left;line-heig...
jquery实现二级菜单
enthan809882的博客
10-27 2558
代码如下： <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <meta charset="utf-8"> <title></title> <style...
Jq二级菜单
pengyaou的博客
10-15 176
采用Jq+CSS实现。 原文完整代码/示例演示
前端二级菜单 - 网页轮播图
12-30
在网页设计中，二级菜单和轮播图是两个非常重要的元素。它们分别负责提供层次分明的导航结构和吸引用户的动态视觉体验。以下是对这两个知识点的详细解析。 首先，前端二级菜单是网页中的一种常见交互设计，它使得...
纯CSS+XHTML实现的二级导航菜单效果
09-24
3. **CSS类切换**：`onmousemove`和`onmouseout`事件用于在鼠标进入和离开菜单项时，更改元素的CSS类，从而实现显示和隐藏二级菜单。 4. **嵌套列表**：`<ul>`和`<li>`标签用于创建多级列表，其中`.item`类的`<div>...
python制作二级菜单_python之tkinter使用-二级菜单
weixin_39875805的博客
11-26 1893
# 菜单功能说明：二级菜单import tkinter as tkfrom tkinter import messageboxroot = tk.Tk()root.title('菜单选择')root.geometry('200x160') # 设置窗口大小def file_fn():label['text'] = '选择了文件的二级菜单！'label.config(fg='red')def se...
二级 菜单 二级 菜单
02-04
二级菜单! 很值得下载看看!资源免费,大家分享!!
php移动端导航栏二级菜单,HTML+CSS简单实现导航栏二级下拉菜单
weixin_36350547的博客
03-19 788
.clearfix::after{content:"";display:block;clear:both;}.header{display:block;color:white;width:100%;height:60px;line-height:60px;background:darkseagreen;margin-top:-16px;}.container{width:1500px;}.head...
js制作的简易二级菜单
02-13
使用javascript制作简易的二级菜单，比较全面，想制作菜单的不同效果可以修改里面的css样式
jQuery二级下拉菜单
08-28
利用JavaScript中的select标签模仿新浪微博的二级下拉菜单
jq实现下拉菜单效果 jq二级菜单效果.zip
06-19
使用jq实现二级菜单效果，jq下拉菜单效果，这个下拉菜单，一般大多数人都选择使用ui框架，但是也有人还是需要jq实现的，写个demo分享给大家
jquery实现漂亮的二级下拉菜单代码
11-24
本文实例讲述了jquery实现漂亮的二级下拉菜单代码。分享给大家供大家参考。具体如下： 这里介绍一款基于jquery实现的网站下拉菜单，黑色风格，很漂亮，本菜单需要点击主菜单后的小三角符号才下拉出二级菜单，并不是有些菜单，是鼠标移上主菜单的时候就滑过，至于哪一种，就看个人的喜好了 先来看看运行效果： 在线演示地址如下： http://demo.jb51.net/js/2015/jquery-bg-2-level-down-show-menu-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E
JQ制作二级菜单
weixin_46409887的博客
04-22 443
效果图: css <style> *{ margin:0; padding:0; } li{ list-style: none; text-align: center; } #ul1{ ...
JQuery之封装二级菜单
席木木的博客
02-14 865
JQuery封装二级菜单HTML菜单定义Flex布局样式图JQuery-二级菜单展开/闭合实现最终效果对比图 HTML菜单定义     HTML代码定义如下，样式代码可以根据需要自行调整，重点是下面如何编写JQuery代码。 <ul class="nav"> <li class="main-menu"> <a class="active" href="#"><i class="fa fa-user-p
jq实现伸缩二级菜单
wmeng13的博客
12-05 624
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&g
jquery写二级菜单
bachou1292的博客
09-23 333
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul ul {display: none;} </style> </head> &lt...
数据结构的作业。用c语言写一个程序。程序要有一个菜单。菜单里有顺序表链表顺序栈链栈顺序队列链队列。还要有循环队列。还要有一个二级菜单，二级菜单里要有插入删除初始化查找以及退出到一级菜单的功能，比如顺序表里就要有初始化顺序表。插入元素。查找元素。删除元素。返回到一级菜单，
最新发布
10-16
3. **二级菜单函数**： - 对于每种数据结构，创建一个子菜单，包含初始化、插入、删除、查找等操作。 - 写入相应的函数，如`init_list()`, `insert_element()`, `delete_element()`, 和 `find_element()` 等，并在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值