本文目錄一覽：
誰內給我講一將如下 下拉菜單的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/zh-tw/n/295934.html
微信掃一掃 
支付寶掃一掃 