精华内容
下载资源
问答
  • 6中下拉式菜单特效ppt模板
  • PPT下拉式菜单特效

    2010-06-01 22:35:12
    PPT下拉式特效PPT下拉式特效PPT下拉式特效PPT下拉式特效
  • Button下拉式菜单

    2020-05-18 10:30:33
    对于Button下拉式菜单,代码如下: <Button x:Name="PopupMenu" Content="&#x2507;" Click="PopupMenu_Click"> <Button.ContextMenu> <ContextMenu Name="contextMenu"> ...

    对于Button下拉式菜单,代码如下:

     

        <Button x:Name="PopupMenu"  Content="&#x2507;" Click="PopupMenu_Click">
                                <Button.ContextMenu>
                                    <ContextMenu Name="contextMenu">
                                        <DockPanel>
                                            <Label DockPanel.Dock="Left" Content="XXX" />
                                            <ComboBox ItemsSource="{Binding XXXCollection}"  SelectedItem="{Binding Value}"/>
                                        </DockPanel>
                                        <MenuItem    Header="XXX" Padding="5,0" Command="{Binding XXX1Command}"/>
                                        <MenuItem    Header="XXX" Padding="5,0"  Command="{Binding XXXCommand}"/>
                                        <MenuItem   Header="XXX" Padding="5,0"  Command="{Binding XXXCommand}"/>
                                    </ContextMenu>
                                </Button.ContextMenu>

    </Button>

    Backside代码如下:

       private void PopupMenu_Click(object sender, RoutedEventArgs e)
            {

                this.contextMenu.PlacementTarget = this.PopupMenu;
                this.contextMenu.Placement = System.Windows.Controls.Primitives.PlacementMode.Bottom;
                this.contextMenu.IsOpen = true;
            }

    展开全文
  • 按钮下拉式菜单

    2015-01-29 13:35:36
    按钮菜单,可以实现展开收缩,样式需要自己修改
  • 前面几篇博文都在讲导航菜单和二级下拉式菜单,其实...航菜单和二级下拉式菜单没法,但是学习了CSS和JS还是能实现一些简单的变换的。这篇博文就来说说用CSS实现 导航菜单结合二级下拉式菜单的两个简单变换吧。  首

           前面几篇博文都在讲导航菜单和二级下拉式菜单,其实有很多方法都可以实现的,具体的情况还要视情况而定。

    后面学习到jQuery框架之后,会有更丰富的动画效果,由于在学习Ajax和jQuery的初步阶段,对于很多的复杂的导

    航菜单和二级下拉式菜单没法做,但是学习了CSS和JS还是能实现一些简单的变换的。这篇博文就来说说用CSS实现

    导航菜单结合二级下拉式菜单的两个简单变换吧。

           首先还是在前面博文的基础上加以实现,其实只用HTML和CSS还是可以做出不错的效果,但是相较于JS和

    jQuery来说就有很大的差距了。这些问题在学习完JS和jQuery之后你就会深有感触。

           一中英文切换导航菜单

           制作原理:在二级下拉式菜单的基础上加以变换就可以实现,在鼠标悬浮在相应的菜单上,二级菜单出现在导航

    单的下面,我们可以把英文的菜单当做是二级菜单,在显示的时候将其反向向上移动到导航菜单上,让多出的部分

    隐藏即可实现。

           浏览器的兼容性问题:我测试的浏览器是火狐,谷歌,2345浏览器,以及IE7和8。

          代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>导航菜单</title>
    <style type="text/css">
    .nav{
    padding-left:40px;
    font-size:20px;
    font-family:"微软雅黑";
    list-style:none;
    font-weight:bold;
    overflow:hidden;/*此处的作用可以清除浮动*/
    border-bottom:10px solid #FF6600;
    }
    .nav li{
    float:left;
    margin-right:1px;
    }
    .nav li a{
    text-decoration:none;
    line-height:40px;
    background-color:#EEEEEE;
    color:#000000;
    display:block;
    width:100px;
    text-align:center;
    }
    /*默认状态下不显示*/
    .nav li a span{
    display:none;
    }
    /*鼠标移到相应元素显示英文*/
    .nav li a:hover span{
    display:block;
    background-color:#FF6600;
    color:#FFFFFF;
    }
    /*反向使用上外边距,使其原来的中文隐藏*/
    .nav li a:hover{
    margin-top:-40px;
    }
    </style>
    </head>
    
    <body>
    <ul class="nav">
    	 <li><a href="#">首页<span>Home</span></a></li>
    	 <li><a href="#">课程大厅<span>Course</span></a></li>
    	 <li><a href="#">学习中心<span>Learn</span></a></li>
    	 <li><a href="#">经典案例<span>Case</span></a></li>
    	 <li><a href="#">关于我们<span>About</span></a></li>
    </ul>
    </body>
    </html>
    
            初始化效果:


            鼠标悬浮效果:



            二多级菜单

            前面有三篇博文讲到了二级下拉式菜单分别用CSS,JS和JQuery实现,做法有很多,这次主要是还是用CSS实

    现。相关的博文请参考:Web前端开发实战1:二级下拉式菜单之CSS实现Web前端开发实战2:二级下拉式菜单之

    JS实现Web前端开发实战3:二级下拉式菜单之jQuery实现

           制作原理同二级下拉式菜单一样。浏览器测试为:IE7,8,谷歌,火狐,2345浏览器。

           代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>导航菜单</title>
    <style type="text/css">
    *{
    margin:0;
    padding:0;
    }
    ul{
    list-style:none;
    }
    .nav{
    font-size:16px;
    font-family:"微软雅黑";
    font-weight:bold;
    margin:20px 50px;
    }
    .nav li{
    float:left;
    margin-right:1px;
    }
    .nav li a{
    text-decoration:none;
    line-height:30px;
    background-color:#EEEEEE;
    color:#000000;
    display:block;
    width:120px;
    text-align:center;
    }
    .nav li a:hover{
    background-color:#FF6600;
    color:#FFFFFF;
    }
    .nav li ul{
    display:none;
    }
    .nav li ul li{
    margin-top:1px;
    position:relative;
    }
    /*鼠标移到相应元素上显示二级菜单*/
    .nav li:hover ul{
    display:block;
    width:120px;
    }
    .nav li:hover ul li ul{
    display:none;
    }
    .nav li:hover ul li ul li{
    margin-left:1px;
    }
    /*鼠标移到相应二级菜单元素上显示三级菜单*/
    .nav li ul li:hover ul{
    display:block;
    position:absolute;
    top:0px;
    left:120px;
    }
    </style>
    </head>
    
    <body>
    <ul class="nav">
             <li><a href="#">首页</a></li>
    	 <li><a href="#">课程大厅+</a>
    	         <ul>
    		     <li><a href="#">视频课程+</a>
    			   <ul>
    			       <li><a href="#">Java</a>
    			       <li><a href="#">PHP</a>
    			       <li><a href="#">C语言</a>
    			   </ul>
    		     </li>
    		     <li><a href="#">案例学习+</a>
    			    <ul>
    				 <li><a href="#">编程练习</a>
    				 <li><a href="#">实例操作</a>
    			         <li><a href="#">答案解析</a>
    			    </ul>
    		     </li>
    		     <li><a href="#">交流学习</a></li>
    		 </ul>
    	 </li>
    	 <li><a href="#">学习中心+</a>
    	     <ul>
    		  <li><a href="#">前端课程+</a>
    			 <ul>
    			     <li><a href="#">HTML/CSS</a>
    			     <li><a href="#">JavaScript</a>
    			     <li><a href="#">jQuery</a>
    			 </ul>
    		  </li>
    		  <li><a href="#">手机开发+</a>
    			 <ul>
    			     <li><a href="#">IOS开发</a>
    			     <li><a href="#">WP开发</a>
    			     <li><a href="#">安卓开发</a>
    			</ul>
    		  </li>
    		  <li><a href="#">后台编程</a></li>
    	     </ul>
    	 </li>
    	 <li><a href="#">关于我们</a></li>
    </ul>
    </body>
    </html>
    
             初始化效果:


             二级下拉菜单效果:


             三级菜单效果:



             这些其实都是最基础的东西,每种方法都有其自己的方式和特点以及浏览器兼容性问题。可能也会因个人的方

    式实现会有不同的代码,但是学会了制作的原理,就会很容易实现。CSS实现导航菜单简单变换,我会在以后的博文

    中使用JS和jQuery实现,同时也要比较几种方法的代码简练程度和实现效果的方式更有浏览器的兼容性问题。从最基

    础Web实战开始,一步一步去实现复杂的网站架构和网站布局和网站效果展示。




    展开全文
  • Web前端开发实战1:二级下拉式菜单之CSS实现

    万次阅读 多人点赞 2015-12-30 20:47:58
    二级下拉式菜单在各大学校网站,电商类网站,新闻类网站等大型?...还是一样的,今天开始一些简单的二级下拉式菜单。  横向一级菜单我们见到的很多,如下图所示是:  二级下拉菜单图:  二级下拉菜单是

           二级下拉式菜单在各大学校网站,电商类网站,新闻类网站等大型?网站很常见,那么它的实现原理是什么呢?

    学习了Web前端开发的知识后,我们是可以实现这样的功能的。复杂的都是从基础效果上添加做出来的,原理和流程

    还是一样的,今天开始做一些简单的二级下拉式菜单。

           横向一级菜单我们见到的很多,如下图所示是:


           二级下拉菜单图:


           二级下拉菜单是在横向一级菜单的基础上添加下拉效果实现的,制作思路:

           第一步:静态网页的制作

           标签<ul><li>...</li></ul>项目列表

           标签<a>链接

           float浮动

           display:block属性

           postion属性规定元素的定位

           第二步:动态特效的实现

           下拉菜单的显示与隐藏

           今天我们使用CSS样式表实现,那么制作流程是:

           1一级菜单设置:设置CSS样式,使一级菜单横向显示,位于一行中。

           2二级菜单设置:给”课程大厅”菜单,添加二级菜单(JavScript/JQuery/Ajax三项),并带链接;同时给“学习中心”菜

    单,添加二级菜单(视频学习/案例学习/交流平台三项),也带链接。

           3隐藏二级菜单: 设置CSS样式,让二级菜单隐藏。

           4显示二级菜单:设置CSS样式,让二级菜单显示。

           5浏览器兼容性问题解决以及代码优化,至少测试五个浏览器。我测试的是IE7,8,9,2345浏览器,谷歌浏览器以

    及火狐浏览器。

           HTML代码部分:

    <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>下拉菜单</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    
    <body>
    <div id="nav" class="nav">
         <ul>
    	          <li><a href="#">网站首页</a></li>
    		  <li><a href="#">课程大厅</a>
    		      <ul>
    			      <li><a href="#">JavaScript</a></li>
    			      <li><a href="#">jQuery</a></li>
    			      <li><a href="#">Ajax</a></li>
    		      </ul>
    		  </li>
    		  <li><a href="#">学习中心</a>
    		      <ul>
    			      <li><a href="#">视频学习</a></li>
    			      <li><a href="#">案例学习</a></li>
    			      <li><a href="#">交流平台</a></li>
    		      </ul>
    		  </li>
    		  <li><a href="#">经典案例</a></li>
    		  <li><a href="#">关于我们</a></li>
         </ul>
    </div>
    </body>
    </html></span>

           CSS样式表style.css文件代码:

    /*CSS全局设置*/
    *{
       margin:0;
       padding:0;
    }
    .nav{
       background-color:#EEEEEE;
       height:40px;
       width:450px;
       margin:0 auto;
    }
    /*横向一级菜单样式设置*/
    ul{
       list-style:none;
    }
    ul li{
       float:left;
       line-height:40px;
       text-align:center;
       position:relative;
    }
    a{
        text-decoration:none;
    	color:#000000;
    	display:block;/*将a行内元素转变成块级元素*/
    	width:90px;
    	height:40px;
    }
    a:hover{
        background-color:#666666;
    	color:#FFFFFF;
    }
    /*二级下拉菜单样式设置*/
    ul li ul li{
        float:none;
    	background-color:#EEEEEE;
    }
    ul li ul{
        position:absolute;
    	top:40px;
    	left:0px;
    	display:none;/*默认状态下或鼠标离开时隐藏*/
    	width:90px;
    }
    /*为了兼容IE7写的CSS样式,但是必须写在a:hover前面*/
    ul li ul li a:link,ul li ul li a:visited{
        background-color:#EEEEEE;
    }
    ul li ul li a:hover{
        background-color:#009933;
    }
    /*鼠标滑过一级菜单的元素时显示下拉菜单*/
    ul li:hover ul{
        display:block;
    }

           来看一下效果:

           1初始化状态或鼠标离开显示为横向一级菜单:


           2鼠标滑过有二级下拉菜单的元素时显示下拉菜单:


           3显示的下拉菜单中的链接样式:





    展开全文
  • 递归实现的无限级下拉式菜单 没有资源积分了 发布一个资源,换点分:( 可以先看看演示在决定下载与否吧. http://ahlxjg.qsh.eu/MenuTest.aspx
  • 前几天项目需要,用到了 阿里云首页的菜单样式,找了很多地方,找到了实例,经过一系列的修改,总算是出来一个符合项目要求的菜单

    前几天项目需要,用到了 阿里云首页的菜单样式,找了很多地方,找到了实例,经过一系列的修改,总算是做出来一个符合项目要求的菜单了.

    导入项目中的两个js和两个css

    下面就是这个菜单的样式实例.


    其代码为:


    就这样的 就可以实现阿里云一样的 下拉式菜单.

    下载路径:http://download.csdn.net/download/dejie0806/10129081

    展开全文
  • 网页中的下拉式菜单

    千次阅读 2012-01-30 18:42:15
    10几年前,我就在网页中用JS脚本实现下拉式菜单,并且导航条还与主窗口处于不同的帧。无非就是些onmouseover,onmouseout之类的事件罢了。这种效果,只要舍得花时间,一万年总可以出来,但我并不觉得这有什么技术...
  • 一个很好用的web下拉式菜单、jquery插件。可根据需要自定义样式。有实例
  • 上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的,我们这一篇来用JavaScript脚本实现下拉菜单的显 示和隐藏。使用 JavaScript方法实现我们需要用的知识有:  1)JS事件:onmouseover鼠标经过事件和onmouseout...
  • 下拉菜单主要有两种类型:1.用于导航的下拉菜单;2.用于表单的下拉菜单。在本文中,我们将对以下内容进行介绍:1、 结构剖析下拉菜单的解剖结构与文本输入字段的解剖结构非常相似。2、下拉菜单类型和变体虽然标准的...
  • 的,那么这篇就用jQuery来实现二级下拉式菜单。  使用JQuery实现需要用到的知识有:  1)使用$(function(){...})获取到想要作用的HTML元素。  2)通过使用children()方法寻找子元素。  3)
  • 黑色下拉式网页菜单代码,当然少不了jquery帮忙了,不过在火狐下好像有点问题,不能展开,不喜欢这种风格的可以自己修改CSS换风格。
  • 一、我的思路CSS制作下拉菜单,主要是运用了样式hover。原来下拉菜单设置的样式是display:none;当一级菜单hover时,下拉菜单从display:none转变为display:block。在设置当一级菜单:a标签被hover时,下拉菜单的...
  • **方法一:纯css实现下拉菜单**Document*{margin: 0;padding:0;}#nav{/*置父容器高度,宽度,背景颜色,容器水平居中*/background: #eee;width: 600px;height: 40px;margin: 0 auto;}#nav ul{/*去掉点点*/list-style...
  • 几乎不懂网页, 更不懂JAVA了, 看到不少网站都有下拉式菜单,简洁、美观、实用,于是也想用在自己管辖下的网站首页上,因为不懂JAVA,所以花了一下午时间去截取和修改别人的代码,发觉事半功倍,得不到自己满意的...
  • Excel中如何制作下拉式菜单

    千次阅读 2009-12-25 12:53:00
    选中一个单元格,然后选择数据-->有效性,在允许那一栏中选择序列,然后在来源中填入你要选择的项目,例如男,女,最后确定。注意,选项中间用英文方式下的逗号分隔。
  • CSS的图片定时循环滚动焦点手风琴式下拉菜单11111111
  • Bootstrap图标、下拉菜单、按钮组、按钮式下拉菜单

    万次阅读 多人点赞 2020-05-18 14:14:31
    1.图标使用 <span class="glyphicon glyphicon-search" aria-hidden="true"></span> .glyphicon 公共类 .glyphicon-search 相应的图标 aria-hidden="true" 意思是让图标只是显示,辅助...2.下拉菜单 ...
  • 本文实例为大家分享了iOS实现顶部标签导航栏及下拉分类菜单的全部过程,供大家参考,具体内容如下 当内容及分类较多时,往往采用顶部标签导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,...
  • 对资料(2)了一些改进,隐藏了下拉框,在使用的时候出现。 前台代码我直接复制了。数据库见资料(2)。 前台代码:               onselectedindexchanged="ddlCityList_...
  • 响应多级下拉菜单,根据分辨率菜单自动变换适合手机浏览
  • 下拉列表框实现 一、实现框架 1 二、实现根视图 1 三、实现DropDownList类 2 四、一些改进 6 cocoa touch不提供下拉框控件,因为他们提供了UIPickerView。为什么还要使用已经成为windows标准控件之一的...
  • 纯HTML+CSS实现三级下拉式导航菜单

    千次阅读 2018-05-31 11:05:25
    /*一级菜单*/ #nav ul{margin:0 auto; width: 800px; display:block;list-style-type:none;} #nav ul li{display:block;width:120px;height:40px; line-height:40px; float:left;text-align:center;border-right:...
  • 响应下的下拉菜单

    千次阅读 2014-12-17 17:47:58
    译文:转换菜单下拉式来适应小屏幕 译者:dwqs Five Simple Steps (ps:称FSS)网站有一个优雅的响应式设计的特点,当浏览器窗口的变小时,右上角的菜单从规则的一行转换成一个下拉菜单。(PS:原文写于2011年...
  • 下拉导航菜单的各种样式

    千次阅读 2007-11-17 21:39:00
    现在用下拉式菜单做友情链接是非常流行的,而且一般有两种形式:一种是选择后按个链接按钮再开始导航,还有更方便的一种是直接点击后就开始导航。目前主流的还是后者,所以今天我也只讨论第二种的方式... 其实第二...
  • 下拉菜单组件 使用bootstrap 下拉菜单组件,需要引入jquery 与 bootstrap文件夹下js目录下的 bootstrap.js。 &lt;script src="jq/jquery-3.3.1.min.js"&gt;&lt;/script&gt; &lt;...
  • 这是我项目的时候接触到的一个需求,然后实现了。它仿大众点评,美团等的多级下拉列表菜单。代码干净,可复用性好,希望对大家有所帮助。
  •  做下拉菜单时,不管怎么触发事件,下拉菜单都不显示。console一下,发现其display一直是none。 .second>li{ width: 300px; height: 30px; list-style: none; background-color: grey; color: #fff...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,897
精华内容 9,558
关键字:

下拉式菜单怎么做