Community Learn Tools Library Leisure
search
English
Home > Web Front-end > CSS Tutorial > DIV and CSS realize the effect of imitating the navigation bar of Jingdong Mall

DIV and CSS realize the effect of imitating the navigation bar of Jingdong Mall

不言
Release： 2018-06-11 16:00:29
Original
2396 people have browsed it

This article mainly introduces p CSS to realize the imitation Jingdong Mall navigation bar effect, involving page p css layout and related techniques of dynamic switching combined with onmouseout mouse events. It has certain reference value. Friends in need can refer to it

The example in this article describes how p CSS realizes the effect of imitating the navigation bar of Jingdong Mall. Share it with everyone for your reference. The details are as follows:

Here is a demonstration of the p CSS function code that imitates the navigation bar of Jingdong Mall. When the mouse slides over the navigation bar option, the corresponding submenu list will pop up. The interface is simple and elegant.

The screenshot of the running effect is as follows:

The specific code is as follows: 

<!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>
Copy after login

The above is the entire content of this article, I hope it will be useful for everyone's learning For help, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

How to use CSS to achieve a black navigation menu effect with shadow effect

CSS3 area Relevant code of module region

The above is the detailed content of DIV and CSS realize the effect of imitating the navigation bar of Jingdong Mall. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
css div Navigation bar
source：php.cn
Previous article：How to set CSS text font color Next article：Two methods to use CSS to implement code that does not change the size of the background image as the browser zooms
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
PX automatic conversion to REM error  <style>html {   font-size: calc(100vw / 3.75);      }...
From 2024-04-16 09:34:16
0
0
4687
Why does omitting 0ms sleep break my css transitions? I'm trying to implement a FLIP animation to see if I understand it correctly. In this code...
From 2024-04-06 16:29:50
0
2
490
Hide/show div on click and scroll I want to create a hidden search form that appears when we click on the search icon and hi...
From 2024-04-06 12:20:46
0
1
386
How can I match the text width to the width of a dynamically sized image/title? See this codepen: https://codepen.io/allen-houng/pen/XGMjMr?editors=1100#0<div><i...
From 2024-04-06 10:04:43
0
2
386
Why does the tooltip still work after removing the link? Only when I remove the link do I see the div tag with the tooltip. How are the two related...
From 2024-04-05 09:51:08
0
1
1419
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template