包含滑出式菜单代码带注释的词条

本篇文章给大家谈谈滑出式菜单代码带注释，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、html5点击文字从右侧滑出层的代码
• 2、c语言制作弹出式菜单
• 3、谁有网页滑出式菜单代码，急

html5点击文字从右侧滑出层的代码

单用css应该不太容易，用js吧

script

    window.onload = function () {//因为是放在最前面，元素没有加载完成所以要加上window.onload表示加载完成

        window.btn = document.getElementById('menubtn');//通过ID来获取菜单打开按钮（文字图片均可实现）

        window.menu = document.getElementById('menu');//通过ID来获取菜单主体

        btn.addEventListener("click", menuClick);//绑定事件：点击的时候触发函数

    };

    function menuClick() {

//思路：当现在菜单是关闭的时候点击按钮菜单CSS动画显示，然后添加class “open”，删除class “close”

//     当现在菜单是打开的时候点击按钮菜单CSS动画消失，然后添加class “close”，删除class “open”

        if (btn.class === "open") {

            menu.classList.add('slide-to-right-and-hide');

            menu.classList.remove("open");

            menu.classList.add("close");

        }

        else {

            menu.classList.add('slide-to-left-and-show');

            menu.classList.remove("close");

            menu.classList.add("open");

        }

    }

/script

style

    #menu {

        position: fixed; /* 永远悬浮在一个地方 */

        top: 0;

        opacity: 0;

        right: -500px; /* 保证全部都被遮盖 */

        width: 500px;

        height: 100vh; /* 高度为整个页面高度 */

        background: black; /* 方便观察 */

        -webkit-animation-duration: 1s;

        animation-duration: 1s;

        -webkit-animation-fill-mode: both;

        animation-fill-mode: both;

    }

    #menubtn {

        position: fixed;

        top: 0;

        right: 0;

        height: 10px;

        width: 10px;

        background: black;

    }

    @keyframes slide-to-left-and-show {

    from {

        opacity: 0 !important;

        right: -500px !important;

    }

    to {

        opacity: 1 !important;

        right: 0px !important;

    }

    } /* 打开动画 */

    .slide-to-left-and-show {

        animation-name: slide-to-left-and-show; /* 使用动画 */

        opacity: 1 !important;

        right: 0px !important;

    }

    @keyframes slide-to-right-and-hide {

    from {

        opacity: 1 !important;

        right: 0px !important;

    }

    to {

        opacity: 0 !important;

        right: -500px !important;

    }

    } /* 关闭动画 */

    .slide-to-right-and-hide {

        animation-name: slide-to-right-and-hide; /* 使用动画 */

        opacity: 0 !important;

        right: -500px !important;

    }

/style

div id="menubtn"/div

div id="menu"/div

如果有不懂的可以继续追问哦，纯手打，累死人了代码编辑，求采纳QAQ

c语言制作弹出式菜单

void Menu()

{

system("cls"); /*调用系统的清屏命令*/

textbackground(BLUE);/*将背景设置为蓝色*/

textmode(2);

window(1,1,25,80);

clrscr();

textx=3;/*光标初始化位置*/

texty=2;

gotoxy(1,2);

cprintf("%c",218);/*画左上角*/

for(i=0;i78;i++)

cprintf("%c",196); /*画水平直线*/

cprintf("%c",191);/*画右上角*/

for(i=3;i=23;i++)

{

gotoxy(1,i);

cprintf("%c",179); /*画垂直线*/

gotoxy(80,i);

cprintf("%c",179);

}

cprintf("%c",192); /*画左下角*/

for(i=0;i78;i++)

cprintf("%c",196);

cprintf("%c",217); /*画右下角*/

gotoxy(1,1);

textcolor(7); /*设置灰色*/

for(i=0;i80;i++)

cprintf("%c",219);/*用符号实现画主菜单的灰色背景区*/

Selectitem(); /*调用选项函数*/

DrawSelectitem(); /*画选项*/

gettext(2,3,78,23,c); /*保存当前文本区域*/

}

/*定义菜单*/

void Selectitem()

{

strcpy(ml[0].name,"File");/*下面的具体选项补空格是为了各菜单黑色背景相同*/

strcpy(ml[0].str[0],"Open ALT-O");

strcpy(ml[0].str[1],"New ALT-N");

strcpy(ml[0].str[2],"Save Ctrl-S");

strcpy(ml[0].str[3],"Write to... ");

strcpy(ml[0].str[4],"Exit ");

ml[0].n=5; /*保存菜单的项数*/

strcpy(ml[1].name,"Edit");

strcpy(ml[1].str[0],"Cut Ctrl+X");

strcpy(ml[1].str[1],"Copy Ctrl+C");

strcpy(ml[1].str[2],"Paste Ctrl+V");

strcpy(ml[1].str[3],"Find ");

strcpy(ml[1].str[4],"FindReplace ");

ml[1].n=5;

strcpy(ml[2].name,"Help");/*系统帮助*/

strcpy(ml[2].str[0],"This System ");

strcpy(ml[2].str[1],"Ver ");

ml[2].n=2;

}

/*显示主单名*/

void DrawSelectitem()

{

for(i=0;i3;i++)

RedText(i,1,ml[i].name); /*显示主菜单名，且首字母为红色*/

}

/*正常显示菜单*/

void RedText(int x,int y,char *z)

{

textbackground(7); /*设置背景颜色为浅灰色*/

gotoxy(3+x*20,y);

for(j=0;z[j];j++)

{

if(j==0)

textcolor(RED);/*第一个字母显示红色*/

else

textcolor(BLACK); /*设置黑色*/

cprintf("%c",z[j]); /*输出菜单名*/

}

}

/*显示选中菜单*/

void BlackText(int x,int y,char *z)

{

textbackground(0); /*设置背景颜色为黑色*/

textcolor(15); /*设置文本颜色为白色*/

gotoxy(3+20*x,y);/*定位坐标*/

cputs(z); /*输出菜单名字符串*/

}

/*画边框函数*/

void DrawFrame(int l,int u,int r,int d,int tcolor,int bcolor)

{

textbackground(bcolor); /*背景颜色*/

textcolor(bcolor); /*文本颜色*/

for(i=l;i=r;i++) /*输出背景区域*/

{

for(j=u;j=d;j++)

{

gotoxy(i,j);

cprintf("%c",219); /*输出背景字符*/

}

}

textcolor(tcolor);/*边框颜色*/

for(i=u+1;id;i++) /*在背景区域内输出边框线*/

{

gotoxy(l,i);

cprintf("%c",179); /*垂直线*/

gotoxy(r,i);

cprintf("%c",179);

}

for(i=l+1;ir;i++)

{

gotoxy(i,u);

cprintf("%c",196); /*水平线*/

gotoxy(i,d);

cprintf("%c",196);

}

gotoxy(l,u);

cprintf("%c",218);/*左上角*/

gotoxy(r,u);

cprintf("%c",191);/*右上角*/

gotoxy(l,d);

cprintf("%c",192);/*左下角*/

gotoxy(r,d);

cprintf("%c",217); /*右下角*/

/* gettext(l+1,u+1,r-1,d-1,save1);*//*保存边框内区域*/

}

/*显示具体下拉选择项目*/

void DrawMl(int n,charnodeptr *L,rownodeptr *R,pformateptr *P,operationptr *C,editptr *E)

{

gettext(1,1,80,25,save);/*保存被掩盖的地方*/

BlackText(n,1,ml[n].name);/*反选显示主菜单*/

DrawFrame(3+20*n-1,2,3+20*n+19,3+ml[n].n,0,7);/*下拉菜单的边框*/

for(i=3;i3+ml[n].n;i++)/*输出所选菜单各选项*/

{

if(i==3)

BlackText(n,i,ml[n].str[i-3]);/*默认选中第一项*/

else

RedText(n,i,ml[n].str[i-3]);/*其余各项首字符红色显示*/

}

gotoxy(79,1);

MoveMl(n,3,L,R,P,C,E);/*菜单选项的控制*/

}

/*菜单选项的控制，n决定水平项，x决定下拉的选项*/

void MoveMl(int n,int x,charnodeptr *L,rownodeptr *R,pformateptr *P,operationptr *C,editptr *E)

{

int flag=1;

while(flag)

{

gotoxy(79,1);

key=bioskey(0);/*接收按键*/

gotoxy(79,1);

switch(key)

{

case ESC:/*退出循环*/

puttext(1,1,80,25,save);/*恢复打开菜单前的样子*/

flag=0;

break;

case LEFT:/*移到左边的选项*/

puttext(1,1,80,25,save);/*恢复打开菜单前的样子*/

if(n==0)/*往左移动越界的话移到最后一个选项*/

DrawMl(2,L,R,P,C,E);

else

DrawMl(n-1,L,R,P,C,E);

flag=0;

break;

case RIGHT:/*移动右边的选项*/

puttext(1,1,80,25,save);/*恢复打开菜单前的样子*/

if(n==2)/*往右移动越界的话移到第一个选项*/

DrawMl(0,L,R,P,C,E);

else

DrawMl(n+1,L,R,P,C,E);

flag=0;

break;

case UP:/*具体选项往上移动*/

RedText(n,x,ml[n].str[x-3]);/*输出红色字体*/

if(x==3)/*移到最上面再按上键，就移到最下面*/

x=3+ml[n].n-1;

else

x--;/*移动到新的要显示的内容*/

BlackText(n,x,ml[n].str[x-3]);/*输出黑色字体*/

flag=1;

break;

case DOWN:/*具体选项往下移动*/

RedText(n,x,ml[n].str[x-3]);

if(x==(3+ml[n].n-1))/*移动到最底下再按下键就移到最上面*/

x=3;

else

x++;/*移动到新的要显示的内容*/

BlackText(n,x,ml[n].str[x-3]);

flag=1;

break;

case ENTER:

puttext(1,1,80,25,save);/*恢复打开菜单前的样子*/

Enter(n,x-3,L,R,P,C,E);/*菜单选项的具体功能*/

flag=0;

break;

}

gotoxy(79,1);

}

}

/*菜单选项的具体功能*/

void Enter(int m,int n,charnodeptr *L,rownodeptr *R,pformateptr *P,operationptr *C,editptr *E)

{

switch(m)

{

case 0:switch(n)

{

case 0:Openfile(L,R,P,C,E);break; /*打开一个已存在的文件*/

case 1:Newfile(L,R,P,C,E);break; /*创建一个文件*/

case 2:Savefile(L);break; /*保存当前操作和文件*/

case 3:Writeto(L); /*另存为*/

case 4:Exit(L); /*退出系统*/

} break;

case 1: switch(n)

{

case 0: cut(L,R,P,C,E);break; /*剪切*/

case 1: copy(L,R,P,C,E);break; /*复制*/

case 2: paste(L,R,P,C,E);break; /*粘贴*/

case 3:find(L,R,P,C,E);break; /*查找*/

case 4:replace(L,R,P,C,E);break;/*替换*/

}break;

case 2:switch(n) /*选择了帮助菜单选项*/

{

case 0:Help();break;

case 1:Ver();

}

}/*结束外switch*/

}

//这是部分程序,如果要完整的例子程序,告诉我邮箱,我发给你.

谁有网页滑出式菜单代码，急

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.pixelLeft0)||(NS document.ssm2.left0)) {

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) winYYOffset-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;ibarText.length;i++) {

tempBar+=barText.substring(i, i+1)+"BR"}

document.write('table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+16+2)+'" bgcolor="'+menuBGColor+'"trtd bgcolor="'+hdrBGColor+'" WIDTH="'+menuWidth+'" font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"b'+menuHeader+'/b/font/tdtd 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('TRTD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'"ILAYERLAYER 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('trtd 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('trtd 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

滑出式菜单代码带注释的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于、滑出式菜单代码带注释的信息别忘了在本站进行查找喔。