masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > DIV和CSS实现仿京东商城导航条效果

DIV和CSS实现仿京东商城导航条效果

不言
Lepaskan： 2018-06-11 16:00:29
asal
2373 orang telah melayarinya

这篇文章主要为大家介绍了p+CSS实现仿京东商城导航条效果,涉及页面p+css布局涉及结合onmouseout鼠标事件动态切换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了p+CSS实现仿京东商城导航条效果。分享给大家供大家参考。具体如下：

这里演示了p+CSS实现仿京东商城导航条功能代码，鼠标滑过导航条选项即可弹出对应的子菜单列表，界面简洁大方。

运行效果截图如下：

具体代码如下：

<!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=utf8" />
<title>京东商城导航条</title>
<style type="text/css">
.my_left_category{
    width:150px;
    font-size:12px;
    font-family:arial,sans-serif;
    letter-spacing:2px;
}
.my_left_category h1{
    background-image:url(images/spring_06.gif);
    height:20px;
    background-repeat:no-repeat;
    font-size:14px;
    font-weight:bold;
    padding-left:15px;
    padding-top:8px;
    margin:0px;
    color:#FFF;
}
.my_left_category .my_left_cat_list{
width:148px;
border-color:#b60134;
border-style:solid;
border-width:0px 1px 1px 1px;
line-height:13.5pt;
}
.my_left_category .my_left_cat_list h2 {
margin:0px;
padding:3px 5px 0px 9px;
}
.my_left_category .my_left_cat_list h2 a {
color:#d6290b;
font-weight:bold;
font-size:14px;
line-height:22px;
}
.my_left_category .my_left_cat_list h2 a:hover {
color:#d6290b;
font-weight:bold;
font-size:14px;
line-height:22px;
}
.my_left_category .h2_cat{
  width:148px;
  height:26px; 
  background-image:url(images/my_menubg.gif);
  background-repeat:no-repeat; 
  line-height:26px;
  font-weight:normal;
  color:#333333;
  position:relative;
}
.my_left_category .h2_cat_1{
  width:148px;
  height:26px; 
  background-image:url(images/my_menubg_1.gif);
  background-repeat:no-repeat; 
  line-height:26px;
  font-weight:normal;
  color:#333333;
  position:relative;
}
.my_left_category a{
  font:12px;
  text-decoration:none;
  color:#333333;
}
.my_left_category a:hover{
  text-decoration:underline;
  color:#ff3333;
}
.my_left_category h3{
margin:0px; 
padding:0px;
height:26px; 
font-size:12px; 
font-weight:normal;
display:block; 
padding-left:8px;
}
.my_left_category h3 span{color:#999999; width:145px; float:right;}
.my_left_category h3 a{  line-height:26px;}
.my_left_category .h3_cat{
 display:none;
 width:204px;
 position:absolute; 
 left:123px; 
 margin-top:-26px; 
 cursor:auto;
}
.my_left_category .shadow{
position:inherit;
background:url(images/shadow_04.gif) left top;
width:204px;
}
.my_left_category .shadow_border{
position:inherit; 
width:200px; 
border:1px solid #959595; margin-top:1px; 
border-left-width:0px; 
background:url(images/shadow_border.gif) no-repeat 0px 21px; 
background-color:#ffffff; 
margin-bottom:3px
}
.my_left_category .shadow_border ul{margin:0; padding:0; margin-left:15px}
.my_left_category .shadow_border ul li {
list-style:none;
padding-left:10px;
background-image:url(images/my_cat_sub_menu_dot.gif);
background-repeat:no-repeat;
background-position:0px 8px;
float:left;
width:75px;
height:26px;
overflow:hidden;
letter-spacing:0px;
} 
.my_left_category .active_cat{ z-index:99;background-position:0 -25px;cursor:pointer;}
.my_left_category .active_cat h3 { font-weight:bold}
.my_left_category .active_cat h3 span{ display:none;} 
.my_left_category .active_cat p{display:block;} 
</style>
</head>
<body>
<p class="my_left_category">
  <h1>分类导航</h1>
  <p class="my_left_cat_list">
    <h2><a href="#">按网站类别</a></h2>
    <p class="h2_cat" onmouseover="this.className=&#39;h2_cat active_cat&#39;" onmouseout="this.className=&#39;h2_cat&#39;">
      <h3><a href="#">企业建站</a></h3>
      <p class="h3_cat">
         <p class="shadow">
          <p class="shadow_border">
            <ul>
             <li><a href="#">LOGO设计</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>
             <li><a href="#">网站建设</a></li>
             <li><a href="#">SEO</a></li>
            </ul>
          </p>
         </p>
      </p>    
    </p> 
    <p class="h2_cat" onmouseover="this.className=&#39;h2_cat active_cat&#39;" onmouseout="this.className=&#39;h2_cat&#39;">
      <h3><a href="#">韩国男装</a></h3>
      <p class="h3_cat">
        <p class="shadow">
          <p class="shadow_border">
            <ul>
             <li><a href="#">LOGO设计</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>
             <li><a href="#">网站建设</a></li>
             <li><a href="#">SEO</a></li>
            </ul>
          </p>
        </p>  
      </p>    
    </p> 
    <p class="h2_cat" onmouseover="this.className=&#39;h2_cat active_cat&#39;" onmouseout="this.className=&#39;h2_cat&#39;">
      <h3><a href="#">脚本之家</a></h3>
      <p class="h3_cat">
        <p class="shadow">
          <p class="shadow_border">
            <ul>
             <li><a href="#">LOGO设计</a></li>
             <li><a href="#">源码下载</a></li>
             <li><a href="#">最新更新</a></li>
             <li><a href="#">下载排行</a></li>
             <li><a href="#">ASP</a></li>
             <li><a href="#">PHP</a></li>
             <li><a href="#">AJAX</a></li>
             <li><a href="#">DELPHI</a></li>
            </ul>
          </p>
        </p>  
      </p>    
    </p> 
<!-- again -->
    <h2><a href="#">按品牌选货</a></h2>
    <p class="h2_cat" onmouseover="this.className=&#39;h2_cat active_cat&#39;" onmouseout="this.className=&#39;h2_cat&#39;">
      <h3><a href="#" style="color:#ff3333;">热销推荐</a></h3>
      <p class="h3_cat">
         <p class="shadow">
          <p class="shadow_border">
            <ul>
             <li><a href="#">LOGO设计</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>
             <li><a href="#">网站建设</a></li>
             <li><a href="#">SEO</a></li>
            </ul>
          </p>
         </p>
      </p>    
    </p> 
    <p class="h2_cat" onmouseover="this.className=&#39;h2_cat active_cat&#39;" onmouseout="this.className=&#39;h2_cat&#39;">
      <h3><a href="#">网站建设</a></h3>
      <p class="h3_cat">
        <p class="shadow">
          <p class="shadow_border">
            <ul>
             <li><a href="#">LOGO设计</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>
             <li><a href="#">LOGO设计</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>
             <li><a href="#">网站建设</a></li>
             <li><a href="#">LOGO设计</a></li>
             <li><a href="#">网站设计</a></li>
             <li><a href="#">网站建设</a></li>
             <li><a href="#">SEO</a></li>
            </ul>
          </p>
        </p>  
      </p>    
    </p> 
    <p class="h2_cat" onmouseover="this.className=&#39;h2_cat active_cat&#39;" onmouseout="this.className=&#39;h2_cat&#39;">
      <h3><a href="#">网站程序</a></h3>
      <p class="h3_cat">
        <p class="shadow">
          <p class="shadow_border">
            <ul>
             <li><a href="#">PHP</a></li>
             <li><a href="#">ASP</a></li>
             <li><a href="#">JSP</a></li>
             <li><a href="#">ASP.Net</a></li>
            </ul>
          </p>
        </p>  
      </p>    
    </p> 
    <p class="h2_cat_1" onmouseover="this.className=&#39;h2_cat_1 active_cat&#39;" onmouseout="this.className=&#39;h2_cat_1&#39;">
      <h3><a href="#">其他网站</a></h3>
    </p>
  <!-- again -->
    <h2><a href="#">按价格选货</a></h2>
    <p class="h2_cat" onmouseover="this.className=&#39;h2_cat active_cat&#39;" onmouseout="this.className=&#39;h2_cat&#39;">
      <h3><a href="#">低端价位</a></h3>
      <p class="h3_cat">
         <p class="shadow">
          <p class="shadow_border">
            <ul>
             <li><a href="#">50元以下</a></li>
             <li><a href="#">50-100元</a></li>
            </ul>
          </p>
         </p>
      </p>    
    </p> 
    <p class="h2_cat" onmouseover="this.className=&#39;h2_cat active_cat&#39;" onmouseout="this.className=&#39;h2_cat&#39;">
      <h3><a href="#">中高端价位</a></h3>
      <p class="h3_cat">
        <p class="shadow">
          <p class="shadow_border">
            <ul>
             <li><a href="#">100-150元</a></li>
             <li><a href="#">150-200元</a></li>
             <li><a href="#">200-300元</a></li>
             <li><a href="#">300元以上</a></li>
             </ul>
          </p>
        </p>  
      </p>    
    </p> 
      <!-- again -->
    <h2><a href="#">超值特价区</a></h2>
    <h2><a href="#">现货区</a></h2>
<!--测试复制end-->    
 </p>
 </p> 
</body>
</html>
Salin selepas log masuk

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何用CSS实现带阴影效果的黑色导航菜单效果

CSS3区域模块region的相关代码

Atas ialah kandungan terperinci DIV和CSS实现仿京东商城导航条效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
css div Bar navigasi
sumber：php.cn
Artikel sebelumnya：如何设置CSS 文本字体颜色 Artikel seterusnya：两种方法用CSS实现背景图尺寸不随浏览器缩放而变化的代码
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Penukaran automatik PX kepada ralat REM  <style>html {   font-size: calc(100vw / 3.75);      }badan {    saiz fon: 0.16rem; ...
daripada 2024-04-16 09:34:16
0
0
4687
Mengapa meninggalkan 0ms tidur mematahkan peralihan css saya? Saya cuba melaksanakan animasi FLIP untuk melihat sama ada saya memahaminya dengan betul. ...
daripada 2024-04-06 16:29:50
0
2
490
Sembunyikan/tunjukkan div pada klik dan tatal Saya ingin mencipta borang carian tersembunyi yang muncul apabila kita mengklik pada ikon ...
daripada 2024-04-06 12:20:46
0
1
386
Bagaimanakah saya boleh memadankan lebar teks dengan lebar imej/tajuk bersaiz dinamik? Lihat codepen ini: https://codepen.io/allen-houng/pen/XGMjMr?editors=1100#0<div><...
daripada 2024-04-06 10:04:43
0
2
386
Mengapakah petua alat masih berfungsi selepas mengalih keluar pautan? Hanya apabila saya mengalih keluar pautan saya melihat teg div dengan petua alat. Bagaiman...
daripada 2024-04-05 09:51:08
0
1
1419
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan