上一篇
下一篇
CSS菜单－下拉菜单效果
作者:cmscn 日期:2008-12-25
<script language="Javascript" type="text/javascript">
/*此处开始可打包成一个JS文件*/
/* true = 菜单纵向排列.
false = 菜单横向排列. */
var vertical = false;
/* 菜单是否居中? (true/false). */
var centrer_menu = false;
/* 一级菜单宽度*/
var largeur_menu = 108;
/* */
var hauteur_menu = 25;
/*二级菜单宽度*/
var largeur_sous_menu = 108;
/* */
var largeur_auto_ssmenu = true;
/* 一级菜单间距 */
var espace_entre_menus = 5;
/*一级菜单距顶部距离 */
var top_menu = 5;
/*二级菜单距顶部距离*/
var top_ssmenu = top_menu + 28;
/* 一级菜单距左边距离. */
var left_menu = 5 ;
/* */
var left_ssmenu = largeur_menu+2;
/* 菜单宽度*/
var delai = 650;
var marge_en_haut_de_page = top_menu - 75;
var marge_a_gauche_de_la_page = largeur_menu + 60;
var suivre_le_scroll=true;
var cacher_les_select=true;
var nbmenu = 0;
var agt = navigator.userAgent.toLowerCase();
var isMac = (agt.indexOf('mac') != -1);
var isOpera = (agt.indexOf('opera') != -1);
var IEver = parseInt(agt.substring(agt.indexOf('msie ') + 5));
var isIE = ((agt.indexOf('msie')!=-1 && !isOpera && (agt.indexOf('webtv')==-1)) && !isMac);
var isIE5win = (isIE && IEver >= 5);
var isIE5mac = ((agt.indexOf('msie') != -1) && isMac);
var isSafari = (agt.indexOf('safari') != -1);
//pour enlever les "px" pour faire des calculs...
var reg = new RegExp("px", "g");
// onScroll pour Internet Explorer, le position:fixed fait ce boulot pour les autres navigateurs
// qui respectent les normes CSS...
window.onscroll = function()
{
if (suivre_le_scroll && (isIE || isIE5mac))
{
if (isIE5mac) document.getElementById("conteneurmenu").style.visibility="HIDDEN";
var cumul=0;
for(i=1;i<=nbmenu;i++)
{
var scrollTop = (document.documentElement&&document.documentElement.scrollTop
?document.documentElement.scrollTop
:document.body.scrollTop);
if (!vertical) {
document.getElementById("menu"+i).style.top = scrollTop + top_menu + "px";
if (document.getElementById("ssmenu"+i))//undefined
document.getElementById("ssmenu"+i).style.top = scrollTop + top_ssmenu + "px";
} else {
document.getElementById("menu"+i).style.top = scrollTop
+(((i-1)*espace_entre_menus)+cumul+1+top_menu)+"px";
if (document.getElementById("ssmenu"+i))//undefined
document.getElementById("ssmenu"+i).style.top = scrollTop
+(((i-1)*espace_entre_menus)+cumul+1+top_menu)+"px";
cumul += isFinite(hauteur_menu)?hauteur_menu:hauteur_menu[i-1];
}
}
if (isIE5mac) document.getElementById("conteneurmenu").style.visibility="visible";
}
}
function preChargement()
{
if (document.getElementById("conteneurmenu"))
document.getElementById("conteneurmenu").style.visibility="hidden";
}
function Chargement() {
//Compte nbmenu
nbmenu = 0;
while (document.getElementById("menu"+(nbmenu+1)))
nbmenu++;
document.getElementById("conteneurmenu").style.visibility="hidden";
trimespaces();
with(document.body.style) {
if (!vertical) marginTop=marge_en_haut_de_page+"px";
else marginLeft=marge_a_gauche_de_la_page+"px";
}
positionne();
CacherMenus();
//pour Safari, qui a du mal ?afficher le menu parfois, le fait de changer la taille
//des caract鑢es corrige le probl鑝e. Merci Stol ! http://iubito.free.fr/forum/read.php?id=705&f=2
if(isSafari)
document.getElementById('conteneurmenu').style.fontSize='10px';
// comme on a 関it?le clignotement, maintenant on fait appara顃re le menu ;-)
document.getElementById("conteneurmenu").style.visibility='';
}
window.onresize = Chargement;
/*
* Place les 閘閙ents du menu correctement, au chargement, au scroll, au redimensionnement
* de la fen阾re
*/
function positionne() {
//Calcul hauteur et largeur fen阾re compatible avec certains doctypes IE
var largeur_fenetre;
if (document.documentElement && document.documentElement.clientWidth) {
largeur_fenetre = document.documentElement.clientWidth;
} else if (document.body && document.body.clientWidth) {
largeur_fenetre = document.body.clientWidth;
} else if (window.innerWidth) {
largeur_fenetre = window.innerWidth;
}
var hauteur_fenetre;
if (document.documentElement && document.documentElement.clientHeight) {
hauteur_fenetre = document.documentElement.clientHeight;
} else if (document.body && document.body.clientHeight) {
hauteur_fenetre = document.body.clientHeight;
} else if (window.innerHeight) {
hauteur_fenetre = window.innerHeight;
}
if (centrer_menu) {
if (!vertical) {
var largeur_totale = espace_entre_menus * (nbmenu-1);
if (isFinite(largeur_menu))
largeur_totale += largeur_menu * nbmenu;
else {
for (i = 1; i <= nbmenu; i++)
largeur_totale += largeur_menu[i-1];
}
left_menu = (largeur_fenetre - largeur_totale)/2;
} else {
var hauteur_totale = espace_entre_menus * (nbmenu-1);
if (isFinite(hauteur_menu))
hauteur_totale += hauteur_menu * nbmenu;
else {
for (i = 1; i <= nbmenu; i++)
hauteur_totale += hauteur_menu[i-1];
}
top_menu = (hauteur_fenetre - hauteur_totale)/2;
}
}
//Menus
var cumul = 0;
for(i=1;i<=nbmenu;i++) {
with(document.getElementById("menu"+i).style) {
if (!vertical) {
top=top_menu+"px";
left=(((i-1)*espace_entre_menus)+cumul+1+left_menu)+"px";
} else {
top=(((i-1)*espace_entre_menus)+cumul+1+top_menu)+"px";
left=left_menu+"px";
}
if (!suivre_le_scroll || isIE || isIE5mac)
position="absolute";
else position="fixed";
//if (vertical) height=hauteur_menu+"px";
margin="0";
zIndex="2";
if (vertical || isFinite(largeur_menu))
width=largeur_menu+"px";
else
width=largeur_menu[i-1]+"px";
if ((!vertical && isFinite(largeur_menu)) || (vertical && isFinite(hauteur_menu))) {
cumul += (!vertical?largeur_menu:hauteur_menu);
}
else {
cumul += (!vertical?largeur_menu[i-1]:hauteur_menu[i-1]);
if (vertical) height=hauteur_menu[i-1]+"px";
}
}
}
//Sous-menus
cumul = 0;
for(i=1;i<=nbmenu;i++) {
if (document.getElementById("ssmenu"+i))//undefined
{
with(document.getElementById("ssmenu"+i).style) {
if (!suivre_le_scroll || isIE || isIE5mac)
position="absolute";
else position="fixed";
if (!vertical) {
top=top_ssmenu+"px";
left=(((i-1)*espace_entre_menus)+cumul+1+left_menu)+"px";
} else {
left=left_ssmenu+"px";
top=(((i-1)*espace_entre_menus)+cumul+1+top_menu)+"px";
}
if (isIE || isOpera || isIE5mac || !largeur_auto_ssmenu) {
if (isFinite(largeur_sous_menu))
width = largeur_sous_menu+(largeur_sous_menu!="auto"?"px":"");
else
width = largeur_sous_menu[i-1]+(largeur_sous_menu[i-1]!="auto"?"px":"");
}
else width = "auto";
if (!vertical && !isIE5mac) {
//repositionnement si d閎orde ?droite
if ((width != "auto")
&& ((left.replace(reg,'').valueOf()*1 + width.replace(reg,'').valueOf()*1) > largeur_fenetre))
left = (largeur_fenetre-width.replace(reg,'').valueOf())+"px";
}
margin="0";
zIndex="30000";
}
}
if ((!vertical && isFinite(largeur_menu)) || (vertical && isFinite(hauteur_menu))) {
cumul += (!vertical?largeur_menu:hauteur_menu);
}
else {
cumul += (!vertical?largeur_menu[i-1]:hauteur_menu[i-1]);
}
}
}
function MontrerMenu(strMenu) {
AnnulerCacher();
CacherMenus();
if (document.getElementById(strMenu))//undefined
with (document.getElementById(strMenu).style)
visibility="visible";
SelectVisible("VISIBLE",document.getElementsByTagName('select'));
}
function CacherDelai() {
timeout = setTimeout('CacherMenus()',delai);
}
function AnnulerCacher() {
if (timeout) {
clearTimeout(timeout);
}
}
function CacherMenus() {
for(i=1;i<=nbmenu;i++) {
if (document.getElementById("ssmenu"+i))//undefined
with(document.getElementById("ssmenu"+i).style)
visibility="hidden";
}
SelectVisible("visible",document.getElementsByTagName('select'));
}
function trimespaces() {
//Contourne un bug d'IE5/win... il ne capte pas bien les css pour les <li>, donc on les vire !
if(isIE5win) {
for(i=1;i<=nbmenu;i++) {
if (document.getElementById("ssmenu"+i))//undefined
with(document.getElementById("ssmenu"+i))
innerHTML = innerHTML.replace(/<LI>|<\/LI>/g,"");
}
}
}
function SelectVisible(v,elem) {
if (cacher_les_select && (isIE||isIE5win))
for (var i=0;i<elem.length;i++) elem[i].style.visibility=v;
}
/*JS文件结束*/
</script>
<style type="text/css">
/*此处开始可打包成CSS文件*/
/***** menu CSS *****/
@media print {
.menu, .ssmenu {
visibility:hidden;
}
}
.menu, .ssmenu {
background-color:#A5B3BE;
color:black;
font-size:12px;
font-weight:;
border:1px solid #23669B;
padding:1px;
filter:alpha(opacity=85);
-moz-opacity:0.75;
opacity: 0.75;
width:15em;
margin:80em;
}
.menu {
text-align:center;
}
.menu span, .ssmenu span {
display:none;
}
.ssmenu ul, .ssmenu li {
padding:0;
margin:0;
list-style-type:none;
}
.menu a, .ssmenu a, .menu a:visited, .ssmenu a:visited {
font-family:"MS Sans Serif", "sans-serif", Verdana, Arial;
text-decoration:none;
color:black;
padding:2px 1px;
display:block;
margin:0px;
width:100%;
}
/*CSS文件结束*/
html>body .menu a, html>body .menu a:visited, html>body .menu a:hover, html>body .menu a:active,
html>body .ssmenu a, html>body .ssmenu a:visited, html>body .ssmenu a:hover, html>body .ssmenu a:active {
width:auto;
}
.ssmenu ul:hover, .ssmenu a:hover, .ssmenu a:focus, .menu a:hover, .menu a:focus {
background-color:#23669B;
color:white;
text-decoration:none;
}
img {
border:none;
}
.ssmenu img {
margin-right:2px;
}
.ssmenu img.hr {
margin-top:0px;
margin-bottom:1px;
margin-left:0;
margin-right:0;
width:100%;
display:block;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
a:hover {color:#6699CC;}
a {text-decoration:none; color:#FFCC66;}
div.fondmenu {
width:100%;
height:100%;
position:absolute;
z-index:1;
visibility:visible;
background-color:#A5B3BE;
top:2px;
height:23px;
}
</style>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<div id="conteneurmenu" style="padding:0px;">
<script language="Javascript" type="text/javascript">
preChargement();
</script>
<script language="javascript" type="text/javascript">
suivre_le_scroll=false;
</script>
<p id="menu1" class="menu"
onmouseover="MontrerMenu('ssmenu1');"
onmouseout="CacherDelai();">
<a href="#"
onmouseover="MontrerMenu('ssmenu1');"
onfocus="MontrerMenu('ssmenu1');">我的首页<span> :</span></a>
</p>
<ul id="ssmenu1" class="ssmenu"
onmouseover="AnnulerCacher();"
onmouseout="CacherDelai();"
onfocus="AnnulerCacher();"
onblur="CacherDelai();">
<li><a href="#">我的CHINAY</a></li>
<li><a href="#">我的首页</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的收藏</a></li>
</ul>
<!-- ----------------------------------------- -->
<p id="menu2" class="menu"
onmouseout="CacherDelai();"
onmouseover="MontrerMenu('ssmenu2');">
<a href="#"
onmouseover="MontrerMenu('ssmenu1');"
onfocus="MontrerMenu('ssmenu2');">社区圈子<span> :</span></a>
</p>
<ul id="ssmenu2" class="ssmenu"
onmouseover="AnnulerCacher();"
onmouseout="CacherDelai();"
onfocus="AnnulerCacher();"
onblur="CacherDelai();">
<li><a href="#">我的CHINAY</a></li>
<li><a href="#">我的首页</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的收藏</a></li>
</ul>
<!-- ----------------------------------------- -->
<p id="menu3" class="menu"
onmouseover="MontrerMenu('ssmenu3');"
onmouseout="CacherDelai();">
<a href="#"
onmouseover="MontrerMenu('ssmenu1');"
onfocus="MontrerMenu('ssmenu3');">我的短信</a>
</p>
<ul id="ssmenu3" class="ssmenu"
onmouseover="AnnulerCacher();"
onmouseout="CacherDelai();"
onfocus="AnnulerCacher();"
onblur="CacherDelai();">
<li><a href="#">我的CHINAY</a></li>
<li><a href="#">我的首页</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的收藏</a></li>
</ul>
<!-- ----------------------------------------- -->
<p id="menu4" class="menu"
onmouseover="MontrerMenu('ssmenu4');"
onmouseout="CacherDelai();">
<a href="#"
onmouseover="MontrerMenu('ssmenu1');"
onfocus="MontrerMenu('ssmenu4');">账户管理</a>
</p>
<ul id="ssmenu4" class="ssmenu"
onmouseover="AnnulerCacher();"
onmouseout="CacherDelai();"
onfocus="AnnulerCacher();"
onblur="CacherDelai();">
<li><a href="#">我的CHINAY</a></li>
<li><a href="#">我的首页</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的收藏</a></li>
</ul>
<!-- ----------------------------------------- -->
</div>
<script language="Javascript" type="text/javascript">Chargement();</script>
<div style="padding-top:40px;"><p>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p></div>
<div><p>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p></div>
<div><p>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p></div>
<div><p>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p></div>
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 0 | 引用: 0 | 查看次数: 531
发表评论
