2讲项目实战js二级菜单

最新推荐文章于 2020-02-23 12:38:26 发布

想旅游咯

最新推荐文章于 2020-02-23 12:38:26 发布

阅读量678

点赞数

分类专栏： web前端

web前端专栏收录该内容

109 篇文章 2 订阅

订阅专栏

#2讲项目实战js二级菜单

*{margin:0px;padding:0px;}
#Top{width:100%;height:149px;background:url("../images/headbg.jpg");}/*背景图片headbg平铺满整个Top盒子*/
#Top .head{width:1000px;height:30px;margin:0px auto;/*head水平居中*/font-size:13px;font-family:"微软雅黑";color:#666;line-height:30px;}
#Top .head span{color:#e20076;font-weight:bold;padding:0px 4px;}
#Top .head a{color:#666;text-decoration:none;font-weight:bold;padding:0px 5px;}
    #Top .head a:hover{color:#e20076;}
#header {height:70px;width:1000px;margin:0px auto;}
#header .banner{width:221px;height:44px;float:left;padding-top:14px;}
#header .logo{width:510px;height:70px;float:left;line-height:70px;font-size:16px;font-family:"微软雅黑";padding-left:80px;}
#header .logo a{font-weight:bold;text-decoration:none;color:#000;padding:0px 20px;float:left}
#header .logo a:hover{color:#e20076;}
#header .search{width:180px;height:35px;float:right;padding-top:18px;position:relative;}
#header .search input.txt{width:140px;height:23px;border:1px solid #e1e1e1;font-size:12px;color:#999;text-indent:10px;position:absolute;left:0px;top:20px;}
#header .search input.but{width:26px;height:25px;background:url('../images/sosoh.jpg');border:0px;position:absolute;left:141px;top:20px;}
#Top .Nav{height:49px;width:1000px;margin:0px auto;}
#Top .Nav .mainNav{width:550px;height:49px;float:left;}
#Top .Nav .mainNav ul li{list-style-type:none;width:100px;height:49px;float:left;line-height:49px;text-align:center;font-size:16px;font-family:"微软雅黑";position:relative;}
#Top .Nav .mainNav ul li a{color:#fff;text-decoration:none;}
#Top .Nav .mainNav ul li .menu{display:none;width:350px;border:2px solid #e10076;border-top:0px;position:absolute;top:49px;left:0px;background:#fff;filter:Alpha(opacity=90);-moz-opacity:0.9;opacity:0.9;padding:10px;}
#Top .Nav .smallNav{width:150px;height:49px;float:right;}
#Top .Nav .mainNav ul li.hover{background:#b80064;}
#Top .Nav .mainNav ul li p{text-align:left;line-height:35px;border-bottom:1px dotted #ddd;}
#Top .Nav .mainNav ul li p span{font-weight:bold;}
#Top .Nav .mainNav ul li p a{color:#666;}
#Top .Nav .mainNav ul li p a:hover{color:#b80064;}
#Top .Nav .smallNav{line-height:49px;font-size:14px;font-family:"微软雅黑";}
#Top .Nav .smallNav a{color:#fff;text-decoration:none;float:left;padding:0px 10px;}
#Top .Nav .smallNav a:hover{text-decoration:underline;}

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="gb2312">
<meta name="author" content="李明杰">
<meta name="keywords" content="湖南海外旅游有限公司湖南长沙最好旅行社湖南海外旅行社长沙旅行社排名">
<meta name="description" content="湖南海外旅行社是湖南首批五星级旅行社，连续三年评为全国百强旅行社，国家特许经营出境游组团社，长沙从事旅游业务最早、综合实力最强的旅游公司，主营出境旅游、国内旅游、入境旅游、会议展览。">
<title>湖南海外旅游</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div id="Top">

  <div class="head"><img src="images/cart.png" align="absmiddle"/>&nbsp全省免费服务热线： <span>96556</span> <span>0731-84635555</span>旅行社同行热线：<span>0731-84402588</span> <a href="#">登陆</a><a href="#">注册</a>
  </div>


   <div id="header">
    <div class="banner"><a href="#"><img src="images/logo.png"/></a></div>
    <div class="logo">
    <a href="#">首页</a>
    <a href="#">出境游</a>
    <a href="#">国内游</a>
    <a href="#">特价游</a>
    <a href="#">签证</a>
    </div>
    <div class="search">
    <form>
    <input type="text" class="txt" value="输入目的地" />
    <input type="submit" class="but" value=""/>
    </form>
    </div>
   </div>


  <div class="Nav">
   <div class="mainNav">
    <ul>
     <li ><a herf="#">出境跟团游</a>
      <div class="menu">
       <p><span>台湾港澳:</span> <a href="#">台湾 </a>|<a href="#"> 香港 </a>| <a href="#">澳门</a></p>
       <p><span>东南亚:</span> <a href="#">泰国</a> | <a href="#">新加坡</a> | <a href="#">马来西亚</a> | <a href="#">越南 </a>| <a href="#">柬埔寨</a> | <a href="#">老挝 </a>| <a href="#">印度</a> | <a href="#">尼泊尔</a></p>
      </div>
     </li>
     <li><a herf="#">国内跟团游</a>
         <div class="menu"></div>
     </li>
     <li><a herf="#">国内自由行</a>
      <div class="menu"></div>
     </li>
     <li><a herf="#">湖南周边游</a>
      <div class="menu"></div>
     </li>
     <li><a herf="#">出境自由行</a>
      <div class="menu"></div>
     </li>
    </ul>
   </div>
   <div class="smallNav">
   <a herf="#">泰国</a><a herf="#">台湾</a><a herf="#">普吉</a>
   </div>
  </div>

</div>
  <img src="images/adv1.jpg" /

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" >
  var d_Value=$(".search input.txt").val();// 获取到它的默认值
  //获取焦点时，即鼠标点击到输入框时，将文本框清空内容
  $(".search input.txt").focus(function(){// $查找获取对象元素.txt 鼠标放上时文本输入框获取焦点
   //$(this)等同于我们的$(".search input.txt")
   if($(this).val()==d_Value){//如果文本框值为默认值"输入目的地点"，则重新赋值文本框内容为空
    $(this).val("");
   }
  });
  //失去焦点时
  $(".search input.txt").blur(function(){// $查找获取对象元素.txt 鼠标放上时文本输入框获取焦点
   //$(this)等同于我们的$(".search input.txt")
   if($(this).val()==""){//如果值为空，则赋值为默认值"输入目的地点"
    $(this).val(d_Value);
   }
  });
  //二级菜单的现实和隐藏。移动鼠标到li标签上和离开li标签所执行的两个函数即两个动作
  $(".Nav .mainNav ul li").hover(function(){
   $(this).find(".menu").show();//显示menu盒子即二级菜单
   $(this).addClass("hover");//给li标签添加hover样式
   },function(){
    $(this).find(".menu").hide();//隐藏menu盒子即二级菜单
    $(this).removeClass("hover");//去除li标签hover样式

  });

</script>
</body>
</html>

想旅游咯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2讲项目实战js二级菜单

#2讲项目实战js二级菜单 *{margin:0px;padding:0px;} #Top{width:100%;height:149px;background:url("../images/headbg.jpg");}/*背景图片headbg平铺满整个Top盒子*/ #Top .head{width:1000px;height:30px;margin:0px aut
复制链接

扫一扫