html代码中如何将浏览器的菜单栏,状态栏,地址栏,工具栏等隐藏

html-css011

html代码中如何将浏览器的菜单栏,状态栏,地址栏,工具栏等隐藏,第1张

可以用弹出窗口的形式实现楼主的想法,当用户点超链接的时候,他以为是<a href="http://www.hao123.com">实际上是执行了一个<a href="void(0)" onclick="window.open()">打开了一个满屏的,没有任何状态,地址,输入等工具栏,这样用户也就无法关闭和改变当前地址

具体open参数,请参考:

window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')

window.open 弹出新窗口的命令;

page.html 弹出窗口的文件名;

newwindow 弹出窗口的名字(不是文件名),非必须,可用空''代替;

height=100 窗口高度;

width=400 窗口宽度;

top=0 窗口距离屏幕上方的象素值;

left=0 窗口距离屏幕左侧的象素值;

toolbar=no 是否显示工具栏,yes为显示;

menubar,scrollbars 表示菜单栏和滚动栏。

resizable=no 是否允许改变窗口大小,yes为允许;

location=no 是否显示地址栏,yes为允许;

status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;

可以用JS实现

<SCRIPT

language=javascript1.2>

function

showsubmenu(sid){

whichEl

=

eval('submenu'

+

sid)

if

(whichEl.style.display

==

'none'){

eval("submenu"

+

sid

+

".style.display=''")

}

else{

eval("submenu"

+

sid

+

".style.display='none'")

}

}

</SCRIPT>

display方法的值为none时,为不显示表格内容

showsubmenu(sid)中的sid为HTML代码中表格中td的id属性值

=====================代码实现过程================

<HTML><HEAD><TITLE>管理导航菜单</TITLE>

<SCRIPT

language=javascript1.2>

function

showsubmenu(sid){

whichEl

=

eval('submenu'

+

sid)

if

(whichEl.style.display

==

'none'){

eval("submenu"

+

sid

+

".style.display=''")

}

else{

eval("submenu"

+

sid

+

".style.display='none'")

}

}

</SCRIPT>

</HEAD>

<BODY>

<TABLE

width=158

align=center>

<TBODY>

<TR>

<TD

id=menuTitle1

style="CURSOR:

hand"

onclick=showsubmenu(1)

height=25

><span

class="glow">导航一</span></TD>

</TR>

<TR>

<TD

height="100%"

id=submenu1

style="DISPLAY:

none">

<DIV

style="WIDTH:

158px">

<TABLE

cellSpacing=0

cellPadding=0

width=132

align=center>

<TBODY>

<TR>

<TD

height=20>1</TD>

</TR>

<TR>

<TD

height=20>2</TD>

</TR>

</TBODY></TABLE>

</DIV>

<DIV

style="WIDTH:

158px">

<TABLE

cellSpacing=0

cellPadding=0

width=130

align=center>

<TBODY>

<TR>

<TD

height=20></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>

<TABLE

width=158

align=center>

<TBODY>

<TR>

<TD

id=menuTitle3

style="CURSOR:

hand"

onclick=showsubmenu(3)

height=25

>

<SPAN

class=glow>导航二</SPAN></TD>

</TR>

<TR>

<TD

id=submenu3

style="DISPLAY:

none">

<DIV

style="WIDTH:

158px">

<TABLE

cellSpacing=0

cellPadding=0

width=132

align=center>

<TBODY>

<TR>

<TD

height=20>3</TD>

</TR>

<TR>

<TD

height=20>4</TD>

</TR>

</TBODY></TABLE>

</DIV>

<DIV

style="WIDTH:

158px">

<TABLE

cellSpacing=0

cellPadding=0

width=130

align=center>

<TBODY>

<TR>

<TD

height=20></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>

</BODY></HTML>

以将 下拉菜单嵌入由盒子中 充当的按钮 为例来说明问题,以类选择器为button的盒子当作触发下拉菜单的容器(即是当鼠标移动到该按钮上面出现下拉框),则必须将hover属性附着在按钮盒子的上一级盒子上,但是通常上一级的盒子比当前盒子大或者里面有多个小盒子,那么鼠标放在按钮外部和上一级盒子的内部仍然可以将下拉带单显示,于是尝试在按钮盒子的上一级加上了一个与按钮大小一样的按钮,并将下拉菜单附着于此。

第一想法就是给未显示(默认隐藏时)的下拉菜单栏添加,其结果就是边框一直处于显示状态,在下拉菜单栏隐藏时无法隐藏。解决方法就是将边框的属性加在hover属性里面,未显示时的边框设置为零。

未显示时属性为( display: none)显示时属性为(display: block),结果就是能够显示与隐藏,但是动画效果没有表现出来。想不通...

除了使用display的属性之外,还可以使用:下拉菜单栏的隐藏通过使菜单栏的属性overflow: hidden 来实现。

list中(隐藏时)的height设置为零,hover中(显示时)的height设置为110px,使用动画transition属性来过渡。

同样是通过overflow: hidden实现隐藏,但是是通过visibility:visible显示隐藏,动画效果仍然有效。

就是相比方法二将hover里面的属性由display: block改为visibility:visible

以上均为鄙人实践的结果,理解甚微,纰漏繁多,还请斧正。

比如说:下拉菜单收起时的动画没有搞明白怎样控制,而且下拉菜单收起时的动画没有边框;假如使用visibility: hidden和visibility:visible实现隐藏和显示时,会出现动画效果播放完之前,下拉菜单栏内容已经展示出来。