本文目录一览：
谁内给我讲一将如下 下拉菜单的js代码
第一， visibility：heddin；是让子菜单初始化时隐藏。这样下面的showmenu函数显示时才有从无到有的效果。
第二 showmenu 是函数名字，可以自己命名，规则和变量名规则一样
第三 触发这个函数时 把子菜单的显示属性设置为显示 如果是hidden 则隐藏。menu是子菜单对象 style是子菜单的样式对象，也可以说是样式属性 visibility是设置网页元素显示与否的样式属性 这里可以改成menu.style.display=””;
第四 document.onclick = hidmenu；是给网页单击事件指定处理函数
这是例子，如果是放到实际网页里就不能这么写了
最好是给每个a标签指定 onclick事件
像下边一样 a href=”javascript:showmenu()”下拉菜单/a
关于下拉菜单的JS代码
style type=”text/css”
#mainMenu{
background-color: #FFF; /* Background color of main menu */
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Fonts of main menu items */
font-size:1.2em; /* Font size of main menu items */
border-bottom:1px solid #000000; /* Bottom border of main menu */
height:30px; /* Height of main menu */
position:relative; /* Don’t change this position attribute */
visibility: hidden;
}
#mainMenu a{
padding-left:20px; /* Spaces at the left of main menu items */
padding-right:20px; /* Spaces at the right of main menu items */
font-weight: bold;
/* Don’t change these two options */
position:absolute;
bottom:-1px;
}
#submenu{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font of sub menu items */
background-color:#E2EBED; /* Background color of sub menu items */
visibility: hidden;
width:778px; /* Don’t change this option */
}
htmlbody #clearmenu{ /* non IE browsers menu bottom spacing */
margin-bottom: 2px;
}
#submenu div{
white-space:nowrap; /* Don’t change this option */
}
/*
Style attributes of active menu item
*/
#mainMenu .activeMenuItem{
/* Border options */
border-left:1px solid #000000;
border-top:1px solid #000000;
border-right:1px solid #000000;
background-color: #E2EBED; /* Background color */
cursor:pointer; /* Cursor like a hand when the user moves the mouse over the menu item */
}
/*
Style attributes of inactive menu items
*/
#mainMenu .inactiveMenuItem{
color: #000; /* Text color */
cursor:pointer; /* Cursor like a hand when the user moves the mouse over the menu item */
}
#submenu a{
text-decoration:none; /* No underline on sub menu items – use text-decoration:underline; if you want the links to be underlined */
padding-left:5px; /* Space at the left of each sub menu item */
padding-right:5px; /* Space at the right of each sub menu item */
color: #000; /* Text color */
}
#submenu a:hover{
color: #FF0000; /* Red color when the user moves the mouse over sub menu items */
}
/style
script type=”text/javascript”
//more javascript from
var topMenuSpacer = 15; // Horizontal space(pixels) between the main menu items
var activateSubOnClick = false; // if true- Show sub menu items on click, if false, show submenu items onmouseover
var leftAlignSubItems = false; // left align sub items t
var activeMenuItem = false; // Don’t change this option. It should initially be false
var activeTabIndex = 0; // Index of initial active tab (0 = first tab) – If the value below is set to true, it will override this one.
var rememberActiveTabByCookie = true; // Set it to true if you want to be able to save active tab as cookie
/*
These cookie functions are downloaded from
*/
function Get_Cookie(name) {
var start = document.cookie.indexOf(name+”=”);
var len = start+name.length+1;
if ((!start) (name != document.cookie.substring(0,name.length))) return null;
if (start == -1) return null;
var end = document.cookie.indexOf(“;”,len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len,end));
}
// This function has been slightly modified
function Set_Cookie(name,value,expires,path,domain,secure) {
expires = expires * 60*60*24*1000;
var today = new Date();
var expires_date = new Date( today.getTime() + (expires) );
var cookieString = name + “=” +escape(value) +
( (expires) ? “;expires=” + expires_date.toGMTString() : “”) +
( (path) ? “;path=” + path : “”) +
( (domain) ? “;domain=” + domain : “”) +
( (secure) ? “;secure” : “”);
document.cookie = cookieString;
}
function showHide()
{
if(activeMenuItem){
activeMenuItem.className = ‘inactiveMenuItem’;
var theId = activeMenuItem.id.replace(/[^\d]/g,”);
document.getElementById(‘submenu_’+theId).style.display=’none’;
}
activeMenuItem = this;
this.className = ‘activeMenuItem’;
var theId = this.id.replace(/[^\d]/g,”);
document.getElementById(‘submenu_’+theId).style.display=’block’;
if(rememberActiveTabByCookie){
Set_Cookie(‘dhtmlgoodies_tab_menu_tabIndex’,’index: ‘ + (theId-1),100);
}
}
function initMenu()
{
var mainMenuObj = document.getElementById(‘mainMenu’);
var subMenuObj = document.getElementById(‘submenu’); //DD added line
mainMenuObj.style.visibility=subMenuObj.style.visibility=”visible” //DD added line
var menuItems = mainMenuObj.getElementsByTagName(‘A’);
if(document.all){
mainMenuObj.style.visibility = ‘hidden’;
document.getElementById(‘submenu’).style.visibility=’hidden’;
}
if(rememberActiveTabByCookie){
var cookieValue = Get_Cookie(‘dhtmlgoodies_tab_menu_tabIndex’) + ”;
cookieValue = cookieValue.replace(/[^\d]/g,”);
if(cookieValue.length0 cookieValuemenuItems.length){
activeTabIndex = cookieValue/1;
}
}
var currentLeftPos = 15;
for(var no=0;nomenuItems.length;no++){
if(activateSubOnClick)menuItems[no].onclick = showHide; else menuItems[no].onmouseover = showHide;
menuItems[no].id = ‘mainMenuItem’ + (no+1);
menuItems[no].style.left = currentLeftPos + ‘px’;
currentLeftPos = currentLeftPos + menuItems[no].offsetWidth + topMenuSpacer;
if(no==activeTabIndex){
menuItems[no].className=’activeMenuItem’;
activeMenuItem = menuItems[no];
}else menuItems[no].className=’inactiveMenuItem’;
if(!document.all)menuItems[no].style.bottom = ‘-1px’;
}
var mainMenuLinks = mainMenuObj.getElementsByTagName(‘A’);
var subCounter = 1;
var parentWidth = mainMenuObj.offsetWidth;
while(document.getElementById(‘submenu_’ + subCounter)){
var subItem = document.getElementById(‘submenu_’ + subCounter);
if(leftAlignSubItems){
// No action
}else{
var leftPos = mainMenuLinks[subCounter-1].offsetLeft;
document.getElementById(‘submenu_’+subCounter).style.paddingLeft = leftPos + ‘px’;
subItem.style.position =’absolute’;
if(subItem.offsetWidth parentWidth){
leftPos = leftPos – Math.max(0,subItem.offsetWidth-parentWidth);
}
subItem.style.paddingLeft = leftPos + ‘px’;
subItem.style.position =’static’;
}
if(subCounter==(activeTabIndex+1)){
subItem.style.display=’block’;
}else{
subItem.style.display=’none’;
}
subCounter++;
}
if(document.all){
mainMenuObj.style.visibility = ‘visible’;
document.getElementById(‘submenu’).style.visibility=’visible’;
}
document.getElementById(‘submenu’).style.display=’block’;
}
window.onload = initMenu;
/script
div id=”mainMenu”
a网页特效/a
a插件下载/a
a网络学院/a
a网站联盟/a
/div
div id=”submenu”
!– The first sub menu —
div id=”submenu_1″
a href=”图形图像”图形图像/a
a href=”鼠标事件”鼠标事件/a
a href=”时间日期”时间日期/a
a href=”导航菜单”导航菜单/a
a href=”文字效果”文字效果/a
a href=”窗体变化”窗体变化/a
/div
!– Second sub menu —
div id=”submenu_2″
a href=”插件”DreamWeaver插件/a
a href=”插件”FireWork插件/a
a href=”插件”PhotoShop插件/a
a href=”组件”FLASH组件/a
/div
!– Third sub menu —
div id=”submenu_3″
a href=”网页制作”网页制作/a
a href=”网络编程”网络编程/a
a href=”图形图像”图形图像/a
a href=”多媒体制作”多媒体制作/a
a href=”网站建设”网站建设/a
a href=”操作系统”操作系统/a
/div
!– Fourth sub menu —
div id=”submenu_4″
a href=””网页设计/a
a href=””艺术创作/a
a href=””电脑网络/a
a href=””生活休闲/a
a href=””个性展示/a
a href=””其它类型/a
/div
/div
br id=”clearmenu” /
JS组件Bootstrap实现下拉菜单效果代码
Bootstrap
下拉菜单
这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。
如果您想要单独引用该插件的功能，那么您需要引用
dropdown.js。或者，正如
Bootstrap
插件概览
一章中所提到，您可以引用
bootstrap.js
或压缩版的
bootstrap.min.js。
一、用法
您可以切换下拉菜单（Dropdown）插件的隐藏内容：
1、通过
data
属性：向链接或按钮添加
data-toggle=”dropdown”
来切换下拉菜单，如下所示：
div
class=”dropdown”
a
data-toggle=”dropdown”
href=”#”下拉菜单（Dropdown）触发器/a
ul
class=”dropdown-menu”
role=”menu”
aria-labelledby=”dLabel”
…
/ul
/div
如果您需要保持链接完整（在浏览器不启用
JavaScript
时有用），请使用
data-target
属性代替
href=”#”：
div
class=”dropdown”
a
id=”dLabel”
role=”button”
data-toggle=”dropdown”
data-target=”#”
href=”/page.html”
下拉菜单（Dropdown）
span
class=”caret”/span
/a
ul
class=”dropdown-menu”
role=”menu”
aria-labelledby=”dLabel”
…
/ul
/div
2、通过
JavaScript：通过
JavaScript
调用下拉菜单切换，请使用下面的方法：
$(‘.dropdown-toggle’).dropdown()
二、下拉菜单简单实例
常规使用中，和组件方法一样，代码如下：
//声明式用法
div
class=”dropdown”
button
class=”btn
btn-primary”
data-toggle=”dropdown”
下拉菜单
span
class=”caret”/span
/button
ul
class=”dropdown-menu”
lia
href=”#”首页/a/li
lia
href=”#”产品/a/li
lia
href=”#”资讯/a/li
lia
href=”#”关于/a/li
/ul
/div
声明式用法的关键核心：
1.外围容器使用
class=”dropdown”包裹；
2.内部点击按钮事件绑定
data-toggle=”dropdown”；
3.菜单元素使用
class=”dropdown-menu”。
//如果按钮在容器外部，可以通过
data-target
进行绑定。
button
class=”btn
btn-primary”
id=”btn”
data-toggle=”dropdown”
data-target=”#dropdown”
在
JavaScript
调用中，没有属性，方法并不好用，下面介绍四个基本事件。
//下拉菜单方法，但仍然需要
data-*
$(‘#btn’).dropdown();
$(‘#btn’).dropdown(‘toggle’);
下拉菜单支持
4
种事件，分别对应弹出前、弹出后、关闭前和关闭后。
//事件，其他雷同
$(‘#dropdown’).on(‘show.bs.dropdown’,
function()
{
alert(‘在调用
show
方法时立即触发！’);
});
三、在标签页内的下拉菜单的用法
!DOCTYPE
html
html
head
titleBootstrap
实例
–
带有下拉菜单的标签页/title
link
href=”/bootstrap/css/bootstrap.min.css”
rel=”stylesheet”
script
src=”/scripts/jquery.min.js”/script
script
src=”/bootstrap/js/bootstrap.min.js”/script
/head
body
p带有下拉菜单的标签页/p
ul
class=”nav
nav-tabs”
li
class=”active”a
href=”#”Home/a/li
lia
href=”#”SVN/a/li
lia
href=”#”iOS/a/li
lia
href=”#”VB.Net/a/li
li
class=”dropdown”
a
class=”dropdown-toggle”
data-toggle=”dropdown”
href=”#”
Java
span
class=”caret”/span
/a
ul
class=”dropdown-menu”
lia
href=”#”Swing/a/li
lia
href=”#”jMeter/a/li
lia
href=”#”EJB/a/li
li
class=”divider”/li
lia
href=”#”分离的链接/a/li
/ul
/li
lia
href=”#”PHP/a/li
/ul
/body
/html
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助。
一点关于JS下拉菜单的代码 ，希望有人可以每行都可以解释下，谢谢。
这里有一个js的多级联动下拉菜单
可以自定义位置和样式 比较实用
里面有教程和源码
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/295934.html
微信扫一扫 
支付宝扫一扫 