`
piperzero
  • 浏览: 3534587 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

基础之初级菜单（带二级显示，可伸展）

 
阅读更多 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="styleNav.css">
<script type="text/javascript">
	function disSub(obj,show){
		
		var subMenu=obj.getElementsByTagName("ul")[0];
		subMenu.style.display=show?'block':'none';
	}
</script>
</head>

<body>
	<ul id="navigation">
		<!--菜单一开始-->
		<li onmouseover="disSub(this,1);" onmouseout="disSub(this,0);"><a href>菜单一</a>
			<ul style="display:none">
				<li>一子菜单一</li>
				<li>一子菜单二</li>
			</ul>
		</li><!--菜单一结束菜单二开始-->
		<li onmouseover="disSub(this,1);" onmouseout="disSub(this,0);"><a href>菜单二</a>
			<ul style="display:none">
				<li>二子菜单一</li>
				<li>二子菜单二</li>
			</ul>		
		</li><!--菜单二结束菜单三开始-->
		<li onmouseover="disSub(this,1);" onmouseout="disSub(this,0);"><a href>菜单三</a>
			<ul style="display:none">
				<li>三子菜单一</li>
				<li onmouseover="disSub(this,1);" onmouseout="disSub(this,0);"><a href>三子菜单二</a>
					<ul style="display:none">
						<li>二子菜单一</li>
						<li>二子菜单二</li>
					</ul>		
				</li>
				</li>
			</ul>	
		</li>
	</ul>
</body>
</html>






  


  

    
    
分享到：
      
      
    

  


  

    

      
      |
      linux 修改系统时间命令
    

  

  

        
  

    
  

    
评论

    
    
    
    
  


  

    
发表评论

            
   您还没有登录,请您登录后再发表评论 

      

  

  





  

    
相关推荐

    
    
    
        
        
    
          
    
            
            
    
              
                
                
                
    
                  
    
                    
                      JS左边可伸展导航菜单
                    
                  
    
                  
    本项目“JS左边可伸展导航菜单”旨在利用JavaScript技术来实现一种动态的、可伸展的左侧导航菜单，为用户提供更直观且友好的浏览体验。  首先，我们关注“JS”（JavaScript）这一标签。JavaScript是一种广泛应用于...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      android  二级可伸展控件示例 expandable list view
                    
                  
    
                  
    在这个示例中，我们看到一个二级可伸展的`ExpandableListView`，意味着它可以展开两层子节点，这在处理复杂数据组织时非常有用。  `ExpandableListView`是`ListView`的一个扩展，继承了其基本的列表展示功能，并增加...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      jQuery右侧可伸展固定浮动菜单代码.zip
                    
                  
    
                  
    本教程将深入探讨如何使用jQuery创建一个右侧可伸展固定浮动菜单，该菜单在页面加载时仅显示一个按钮，点击后能够垂直展开全部菜单项。  首先，我们需要在HTML结构中设置基础布局。创建一个包含菜单按钮和隐藏菜单的...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      JQUERY制作的点击图像伸展显示导航菜单广告代码
                    
                  
    
                  
    为了实现伸展显示的效果，我们使用了CSS来定义隐藏和显示的状态。在CSS中，可以这样设置：  ```css #navMenu {  background-color: #f9f9f9; /* 自定义背景色 */  padding: 20px; /* 边距 */  width: 100%; /* 宽度 ...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      4款点击展开的菜单特效-伸展菜单.rar
                    
                  
    
                  
    鼠标点击后张开的菜单特效-伸展菜单，一共有4款这种效果的菜单，展开菜单，鼠标点击后展开，如图所示，点击任意一个人的头像后，该人的照片会放大显示，其它人的头像会被挤向两边，比较动感，来自国外网站，代码开源...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      变大 伸展 菜单 特效
                    
                  
    
                  
    此外，"变大伸展菜单特效"还可能结合其他技术，如使用SVG（可缩放矢量图形）来创建可伸缩的图标，或者利用CSS3的`keyframes`来实现更复杂的动画序列。这不仅可以确保在不同设备和分辨率下保持良好的视觉效果，还能...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      利用JQUERY制作的点击图像伸展显示导航菜单广告
                    
                  
    
                  
    "利用JQUERY制作的点击图像伸展显示导航菜单广告"是一个巧妙的实现方式，它能够提升网站的吸引力和功能性。这个技术结合了jQuery库的力量，为用户提供了一种新颖的、动态的方式来展示信息，特别适合于公司形象的展示...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      jQuery菜单滑动伸展收缩特效.zip
                    
                  
    
                  
    "jQuery菜单滑动伸展收缩特效"是一个典型的应用实例，它旨在模仿淘宝网的菜单行为，实现优雅的展开和折叠效果。这个特效能够使用户界面更加友好，提升用户体验。  首先，jQuery的核心在于其简洁的API，使得开发者...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      利用JQUERY制作的点击图像伸展显示导航菜单广告代码.rar
                    
                  
    
                  
    利用JQUERY制作的点击图像伸展显示导航菜单广告代码.rar利用JQUERY制作的点击图像伸展显示导航菜单广告代码.rar利用JQUERY制作的点击图像伸展显示导航菜单广告代码.rar利用JQUERY制作的点击图像伸展显示导航菜单广告...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      jQuery可伸展的侧边栏固定浮动菜单特效源码.zip
                    
                  
    
                  
    《jQuery可伸展的侧边栏固定浮动菜单特效源码详解》  在Web开发中，交互性和用户体验是至关重要的因素，而菜单作为用户导航的重要工具，其设计与实现方式直接影响到网站的易用性。jQuery作为一款强大的JavaScript库...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      drop-menu(向上,向下,向右伸展导航菜单)
                    
                  
    
                  
    **drop-menu(向上,向下,向右伸展导航菜单)**  在网页设计中，导航菜单是用户界面的重要组成部分，它帮助用户快速访问网站的不同部分。`drop-menu`是一种常见的交互式菜单，通常用于呈现多层次的导航结构。这种菜单在...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      可伸展TextView
                    
                  
    
                  
    在这种情况下，`可伸展TextView`（Expandable TextView）成为了一个实用的解决方案。这种控件允许用户点击后展开全部内容，提供了一种优雅的方式来处理长文本的显示。  一、`可伸展TextView`的概念与需求 `可伸展...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      使用JQUERY制作的点击图像伸展显示导航菜单广告代码
                    
                  
    
                  
    确实很炫！！！！！使用JQUERY制作的点击图像伸展显示导航菜单广告代码
    
                
    
                
              
                
                
                
    
                  
    
                    
                      caidan.rar_伸展树_树型菜单
                    
                  
    
                  
    伸展树，也称为可折叠/可伸展树，是树型菜单的一个特定实现，允许用户通过点击图标（通常是加号"+"或减号"-"）来展开或收起子节点，从而提高用户交互的效率和界面的清晰度。  伸展树的基本结构是由节点组成的，每个...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      4.扁平可伸展导航_可伸展导航_
                    
                  
    
                  
    总结来说，扁平可伸展导航是一种结合了扁平化设计和交互性的导航模式，它优化了用户体验，特别是在需要多级菜单的管理系统中。通过HTML、CSS和JavaScript的巧妙运用，开发者可以创建出既美观又实用的导航栏，满足...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      asp无限级分类加js收缩伸展功能代码
                    
                  
    
                  
    在描述中提到的"js收缩伸展功能"，是指在前端使用JavaScript来控制分类的显示与隐藏，增强用户体验。这种功能常见于导航菜单或者目录树中，用户可以点击某个分类节点，其下的子分类就会动态地展开或收起。JavaScript...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      向下伸展滑出的CSS Div导航菜单.rar
                    
                  
    
                  
    这种菜单利用CSS（层叠样式表）和jQuery JavaScript库来创建动态效果，当用户将鼠标悬停在主菜单项上时，二级菜单会以平滑的滑动效果自上而下展开。  首先，我们来看CSS在这个设计中的作用。CSS是用于定义网页元素...
    
                
    
                
              
            
    
          
    
        
    
    

  





  
    Magicbox
  













      

            
    

    
    
  

  



   Global site tag (gtag.js) - Google Analytics