recherche

Maison >interface Web >js tutoriel >JS CSS implémente des compétences code_javascript d'effet de navigation secondaire exquises

JS CSS implémente des compétences code_javascript d'effet de navigation secondaire exquises

WBOY
WBOYoriginal
2016-05-16 15:38:541084parcourir

L'exemple de cet article décrit le code CSS JS pour implémenter des effets de navigation secondaires exquis. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'une belle navigation secondaire basée sur JS CSS, adaptée aux amis qui souhaitent apprendre quelques points de base et des connaissances et compétences de base en js. En fait, la réalisation de ce menu nécessite non seulement des connaissances de base, mais aussi des idées ingénieuses après s'être familiarisé avec CSS. Vous pourrez peut-être écrire des menus, mais écrire de bons menus n'est pas si simple.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-css-jm-2l-nav-menu-codes/

Le code spécifique est le suivant : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js+css精美二级导航</title>
<style>
<!--
body {margin0; padding:0; text-transform:capitalize;}
ul,li {margin:0; padding:0; list-style-type:none;}
.menu {width:606px; height:48px; background:url(images/nav.gif) 0 0 no-repeat;}
.inner {padding:0 0 0 9px;}
.menu li {float:left; font-size:12px;}
.menu li a {text-decoration:none; color:#000; display:block; padding:0 20px; font:12px/44px "微软雅黑";}
.menu li a:hover {text-decoration:none; color:orange; font:12px/44px "微软雅黑";}
.menu li ul {visibility:hidden; position:absolute;}
.menu li.hover ul {/*ie6不支持li:hover所以在这里写成li.hover以方便js取样式*/visibility:visible; position:absolute; display:block; width:408px; padding:0 0 0 18px; background:url(images/subUlBg.gif) 0 0 no-repeat;}
.menu ul ul li a {padding:0 1em; line-height:48px;}
.menu ul ul li a:hover {padding:0 1em; line-height:48px;}
.menu {margin:50px auto;}
p {text-align:center; font:12px/200% "微软雅黑"; color:skyblue; }
p a {color:skyblue;}
-->
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
 function showSubLevel(Obj){
 Obj.className="hover";
 }
 function hideSubLevel(Obj){
 Obj.className="";
 }
</script>
<div class="menu">
 <ul class="inner">
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"><a href="#">mainLevel</a>
 <ul>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 </ul>
 </li>
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"><a href="#">mainLevel</a>
 <ul>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 </ul>
 </li>
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"><a href="#">mainLevel</a>
 <ul>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 </ul>
 </li>
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"><a href="#">mainLevel</a>
 <ul>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 </ul>
 </li>
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"><a href="#">mainLevel</a>
 <ul>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 </ul>
 </li>
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"><a href="#">mainLevel</a>
 <ul>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 </ul>
 </li>
 </ul>
</div>
<p>Made by Jacktomato<br />
适合想学一些简体、基本的js朋友们</p>
</body>
</html>

J'espère que cet article sera utile à la programmation JavaScript de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：JS implémente un code publicitaire de couplet très pratique (hauteur adaptative)_compétences javascriptArticle suivant：JS implémente un code publicitaire de couplet très pratique (hauteur adaptative)_compétences javascript

Articles Liés

Voir plus