當前位置:首頁 » 網頁前端 » web滑動菜單
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web滑動菜單

發布時間: 2022-11-18 23:15:01

㈠ 誰有網頁滑出式菜單代碼,急

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>網頁特效|Linkweb.cn/Js|---滑出式菜單</title>
<style>
<!--
#ssm2 A {
color:black;
text-decoration:none;
font-size:12;
font-family:verdana;
}

#ssm2 A:hover {
color:red;
}

-->
</style>
</head>

<body>

<script language="JavaScript">

function MM_displayStatusMsg(msgStr) {
status=msgStr;
document.MM_returnValue = true;
}

function highlight(x){
document.forms[x].elements[0].focus()
document.forms[x].elements[0].select()
}

function MM_jumpMenu(targ,selObj,restore){
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}

var NS
IE=document.all;
NS=document.layers;

hdrFontFamily="Verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#666666";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#CCCCCC";
linkTarget="_top";
YOffset=60;
staticYOffset=20;
menuBGColor="black";
menuIsStatic="no";
menuHeader="大類菜單1"
menuWidth=150; // Must be a multiple of 5!
staticMode="advanced"
barBGColor="#1298fd";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barText="滑出式菜單";

function moveOut() {
if (window.cancel) {
cancel="";
}

if (window.moving2) {
clearTimeout(moving2);
moving2="";
}
if ((IE && ssm2.style.pixelLeft<0)||(NS && document.ssm2.left<0)) {
if (IE) {ssm2.style.pixelLeft += (5%menuWidth);
}
if (NS) {
document.ssm2.left += (5%menuWidth);
}

moving1 = setTimeout('moveOut()', 5)
}
else {
clearTimeout(moving1)
}
};

function moveBack() {
cancel = moveBack1()
}
function moveBack1() {
if (window.moving1) {
clearTimeout(moving1)
}

if ((IE && ssm2.style.pixelLeft>(-menuWidth))||(NS && document.ssm2.left>(-150))) {
if (IE) {ssm2.style.pixelLeft -= (5%menuWidth);
}
if (NS) {
document.ssm2.left -= (5%menuWidth);
}
moving2 = setTimeout('moveBack1()', 5)}
else {
clearTimeout(moving2)
}
};

lastY = 0;
function makeStatic(mode) {
if (IE) {winY = document.body.scrollTop;var NM=ssm2.style
}
if (NS) {winY = window.pageYOffset;var NM=document.ssm2
}
if (mode=="smooth") {
if ((IE||NS) && winY!=lastY) {
smooth = .2 * (winY - lastY);
if(smooth > 0) smooth = Math.ceil(smooth);
else smooth = Math.floor(smooth);
if (IE) NM.pixelTop+=smooth;
if (NS) NM.top+=smooth;
lastY = lastY+smooth;
}
setTimeout('makeStatic("smooth")', 1)
}

else if (mode=="advanced") {
if ((IE||NS) && winY>YOffset-staticYOffset) {
if (IE) {NM.pixelTop=winY+staticYOffset
}
if (NS) {NM.top=winY+staticYOffset
}
}
else {
if (IE) {NM.pixelTop=YOffset
}
if (NS) {NM.top=YOffset-7
}
}
setTimeout('makeStatic("advanced")', 1)
}
}

function init() {
if (IE) {
ssm2.style.pixelLeft = -menuWidth;
ssm2.style.visibility = "visible"
}
else if (NS) {
document.ssm2.left = -menuWidth;
document.ssm2.visibility = "show"
}
else {
alert('Choose either the "smooth" or "advanced" static modes!')
}
}

function MM_displayStatusMsg(msgStr) {
status=msgStr;
document.MM_returnValue = true;
}
</script>

<script language="JavaScript">
if (IE) {document.write('<DIV ID="ssm2" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : '+YOffset+'px ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()">')}
tempBar=""
for (i=0;i<barText.length;i++) {
tempBar+=barText.substring(i, i+1)+"<BR>"}
document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+16+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+menuWidth+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></font></td><td align="center" rowspan="100" width="16" bgcolor="'+barBGColor+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD></tr>')
function addItem(text, link, target) {
if (!target) {target=linkTarget}
document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+link+'" target="'+target+'" CLASS="ssm2Items">'+text+'</A></FONT></LAYER></ILAYER></TD></TR>')}
function addHdr(text) {
document.write('<tr><td bgcolor="'+hdrBGColor+'" WIDTH="140"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></font></td></tr>')}

//Only edit the script between HERE

addItem(' 小類菜單1', '#', '_blank');
addItem(' 小類菜單2', '#', '_blank');
addItem(' 小類菜單3', '#', '_blank');
addItem(' 小類菜單4', '#', '_blank');
addItem(' 小類菜單5', '#', '_blank');
addItem(' 小類菜單6', '#', '_blank');
addHdr('大類菜單2');
addItem(' 小類菜單1', '#', '_blank');
addItem(' 小類菜單2', '#', '_blank');
addItem(' 小類菜單3', '#', '_blank');
addItem(' 小類菜單4', '#', '_blank');
addItem(' 小類菜單5', '#', '_blank');
addItem(' 小類菜單6', '#', '_blank');

// and HERE! No more!

document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial"> </font></td></TR></table>')
if (IE) {document.write('</DIV>')}
if (NS) {document.write('</LAYER>')}
if ((IE||NS) && (menuIsStatic=="yes"&&staticMode)) {makeStatic(staticMode);}

</script>
<script>
window.onload=init
</script>

</body>
</html>

㈡ Web程序設計二級下拉菜單頁面怎麼做

Web程序設計二級下拉菜單頁面做法:
以純CSS為例:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
*{
margin:0px;
padding:0px;
}
#menu
{

width:500px;
height:38px;
margin:5px auto;

}
#menu ul
{
height:38px;
list-style:none;
margin:0;
padding:0;
}
#menu li
{
float:left;

}
#menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:38px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
#menu li a:hover{
color:#000000;
text-decoration:none;
}

#menu li ul{
background: #ECE9E9;
border:1px solid #D8D8D8;
display:none;
height:auto;
position:relative;
left:20px;
width:100px;
z-index:200;
}
#menu li ul li
{
margin-left:0px;
height:38px;

}

#menu li:hover ul{
display:block;
}
#menu li li {
display:block;
float:none;
width:100px;
}
#menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
#menu li ul a:hover{
background:#555;
color:#fff;

}

</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">無下拉狀態</a></li>
<li><a href="#">有下拉狀態</a>
<ul>
<li><a href="#">選項1</a></li>
<li><a href="#">選項2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

㈢ 下拉菜單的在web頁面的應用

以條形菜單欄和菜單欄中每個菜單項的彈出菜單窗口兩部分組成,一般作為應用系統的主菜單使用。

㈣ 高分尋求一個應用於web從左到右顯示的下拉菜單

你不知到嗎?可以把這個給縮小啊你按最角的那個然後就可以了

㈤ css 滑動門菜單製作

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>滑動門</title>
<style>
<!--
* {
margin:0;
padding:0;
font-size:12px;
}
body {
padding:30px;
}
.tabsBox {
width:400px;
margin:20px auto;
}
.tabs {
height:20px;
}
.tabs li {
width:80px; text-align:center;
padding-top:2px;
line-height:18px;
float:left;
background-color:#ccc;
margin-right:5px;
list-style:none;
position:relative;
cursor:pointer;
color:#333;
}
.tabs li span {
display:none;
}
.tabs .cur {
background-color:#f0f0f0;
}
.tabs .cur span {
display:block;
width:1px;
height:1px;
border:solid 8px;
border-color:#f0f0f0 #fff #fff #fff;
position:absolute;
top:20px;
left:32px;
overflow:hidden;
z-index:-1;
}
.cons {
height:120px;
padding:8px 12px;
overflow:hidden;
border:1px solid #f0f0f0;
position:relative;
z-index:1;
}
.cons ul li {
list-style:none;
line-height:20px;
}
.hidden {
display:none;
}
.block {
display:block;
}
-->
</style>
</head>
<body>
<div class="tabsBox">
<ul id="Tabs" class="tabs">
<li class="cur">最新更新<span></span></li>
<li>推薦下載<span></span></li>
<li>下載排行<span></span></li>
<li>本月排行<span></span></li>
</ul>
<div id="TabsCon" class="cons">
<ul>
<li><a href="/soft/4764.shtml" target="_blank">基於JavaScript的氣泡提示網頁版</a></li>
<li><a href="/soft/8021.shtml" target="_blank">C#調用OFFICE組件生成Excel表格示例</a></li>
<li><a href="/soft/9011.shtml" target="_blank">iFrame 框架在多頁面間相互傳值的實例</a></li>
<li><a href="/soft/1658.shtml" target="_blank">高亮顯示代碼的在線編輯器ASP.NET版</a></li>
<li><a href="/soft/1852.shtml" target="_blank">《Java2核心技術卷2:高級特性》第7版中文高清 PDF</a></li>
<li><a href="/soft/1361.shtml" target="_blank">VB餐廳POS收銀軟體</a></li>
</ul>
<ul>
<li><a href="/soft/1361.shtml" target="_blank">VB餐廳POS收銀軟體</a></li>
<li><a href="/soft/3855.shtml" target="_blank">VB 6.0 簡體中文標准版</a></li>
<li><a href="/soft/8467.shtml" target="_blank">Delphi加密隱藏或還原Windows盤符驅動器</a></li>
<li><a href="/soft/5238.shtml" target="_blank">ImageVue 2.0 PHP+FLASH+XML高級相冊</a></li>
<li><a href="/soft/7667.shtml" target="_blank">VB商品零售進銷存程序含MSSQL資料庫文件</a></li>
</ul>
<ul>
<li><a href="/jscss/code/1915.shtml" target="_blank">jQuery 模塊拖動,拖動層效果,可淡入淡出</a></li>
<li><a href="/jscss/code/1914.shtml" target="_blank">jQuery單行新聞滾動</a></li>
<li><a href="/jscss/code/1913.shtml" target="_blank">經典的jQuery多行文本滾動</a></li>
<li><a href="/jscss/code/1912.shtml" target="_blank">JS圖片切換學習版,沒有過多修飾</a></li>
<li><a href="/jscss/code/1911.shtml" target="_blank">漂浮廣告代碼,Js演示</a></li>
<li><a href="/jscss/code/1910.shtml" target="_blank">邊滾邊停的JS圖片滾動</a></li>
</ul>
<ul>
<li><a href="/soft/9217.shtml" target="_blank">遞歸讀取資料庫創建樹控菜單的Delphi例子</a></li>
<li><a href="/soft/9199.shtml" target="_blank">VB抓取DLL或EXE應用程序內的圖標資源</a></li>
<li><a href="/soft/9236.shtml" target="_blank">jQuery StartStopSlider 滾動切換插件</a></li>
<li><a href="/soft/9235.shtml" target="_blank">jQuery EasyUI 實例演示(菜單、TAB等)</a></li>
<li><a href="/soft/9227.shtml" target="_blank">VB+SQL2000考試卷(題庫)生成與管理系統</a></li>
</ul>
</div>
</div>
<script>
<!--
var lis = document.getElementByIdx_x("Tabs").getElementsByTagName_r("li");
var uls = document.getElementByIdx_x("TabsCon").getElementsByTagName_r("ul");
var order = 0;
for(var i=0; i<lis.length; i++){
lis[i].value = i;
lis[i].onmouseover = function(){
ChangeTabs(this.value);
};
uls[i].className = "hidden";
}
lis[order].className = "cur";
uls[order].className = "block";
function ChangeTabs(nowTab){
lis[order].className = "";
uls[order].className = "hidden";
order = nowTab
lis[nowTab].className = "cur";
uls[nowTab].className = "block";
}
-->
</script>
</body>
</html>

㈥ java web怎麼實現下拉菜單

這個很好實現,在後台進行查詢,查詢到所有的菜單id和name以及其他的數據,後返回主頁面,再有jstl表達式遍歷出來,或者c標簽的foreach標簽直接遍歷就ok了

㈦ 為什麼我的瀏覽器滑動按鈕不見了

選項,INTERENT選項,內容
單幾自動完成,把WEB地址打勾就會把你在IE地址攔地址保存了
,在把表單打勾,表單是保存你在網路這些搜索網站搜索過的要害字
=-------------------------------------------------------
選項,INTERENT選項,內容
單幾自動完成,把WEB地址打勾就會把你在IE地址攔地址保存了
,在把表單打勾,表單是保存你在網路這些搜索網站搜索過的要害字
不是這個意思啊!
假如把WEB地址打勾的話,IE地址還是不能保存的啊!
web地址的功能是:
當你輸入過一次如:
www..com
,下次只要輸入一個字母b,IE的下拉菜單就自動跳出
www..com
的鏈接讓你選擇的。
但是我的意思是,直接點擊地址欄右側的下拉菜單按鈕就可以看到以前瀏覽的地址。
現在的問題就是,點擊地址欄右側的下拉菜單按鈕不能顯示以前瀏覽的地址。

㈧ 求請教啊,運用iscroll插件如何在手機web網頁上做一個能左右滑動的導航菜單啊,或者有其他實現方式

iscroll 我記得是 上下 的吧? 他做滾動條 還有 就是 模擬 上下彈 的效果不錯

就用 普通的 js 么 獲取當前滑鼠的位置 和偏移量 然後更改 導航的 位置 不就完了?
有一點就是 手機的事件 可以是 touchstart touchmove touchend 也可以是滑鼠事件 不過 touch事件響應快

㈨ 手機web頁面上下滑動隱藏顯示菜單欄效果怎麼做

就我個人開發來談,一般我會用兩種方式,題主可以一試
1、一般開發中,會經常使用前端框架,如果有所使用,可以看框架的官方文檔,一般都會有適配移動端的菜單api可以用,那樣是最方便的,但樣式可能有的需要自己重新定義;
2、如果沒有使用框架,那就可以用兩個套路了,一是簡單粗暴,直接搜js移動端菜單插件,會有很多的現成開源的插件,可以試試,一般都會幫監聽上下滑動的事件來進行調用的;二是如果你找到的插件沒有監聽事件,或者沒找到插件,那就自己寫html控制項,用js監聽上下滑動事件,比如可以用y軸滾動條的距離窗口的高度是減少或者增加來作為判斷標准,來彈出或隱藏菜單欄。
一點小建議,題主可以試試看效果如何。

㈩ web 開發動態菜單如何實現

<div id="exhib_1" class="border">
<div class="title">
<h2>
認證公告:</h2>
<div class="clear">
</div>
</div>
<div id="rolllink" style="overflow: hidden; padding-left: 10px; width: 250px; height: 130px">
<div id="rolllink1">
<ul class="midContent list">
<LI>綁定數據</LI>
<LI>綁定數據</LI>
<LI>綁定數據</LI>
<LI>綁定數據</LI>
<LI>綁定數據</LI>
<LI>綁定數據</LI>
<LI>綁定數據</LI>
<LI>綁定數據</LI>
</ul>
</div>
<div id="rolllink2">
</div>
</div>

<script type="text/javascript">
var rollspeed=40
rolllink2.innerHTML=rolllink1.innerHTML
function Marquee(){
if(rolllink2.offsetTop-rolllink.scrollTop<=0)
rolllink.scrollTop-=rolllink1.offsetHeight
else{
rolllink.scrollTop++
}
}
var MyMar=setInterval(Marquee,rollspeed)
rolllink.onmouseover=function()
rolllink.onmouseout=function()
</script>

</div>