This example will show you how to implement the Html tab drop-down animation effect using jQuery. When you move the mouse over the tab, it will display a drop-down menu area. When you move the mouse out of the drop-down area, the drop-down area will disappear.
1. jQuery Implement Tab Drop-Down Effect Source Files.
./ ├── css │ └── new.css ├── images │ ├── a.jpg │ ├── banner.jpg │ ├── [email protected] │ ├── [email protected] │ ├── [email protected] │ ├── [email protected] │ ├── [email protected] │ ├── logo.png │ └── [email protected] ├── index.html └── js └── jquery.min.js
1.1 index.html.
<!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>jQuery Tab Drop Down Animation Effect</title> <style> *{ box-sizing: border-box; margin: 0; padding: 0; list-style: none;} .header{ position: relative; min-height: 37vw; background: url('./images/banner.jpg'); color: #eee; } .headerTitle{ height: 50px; line-height: 50px; } .headerTitle ul{ padding-left: 250px; } .headerTitle li{ float: left; padding:0 40px; cursor: pointer; } .headerTitle li:hover,.headerTitle li.on{ background-color: #42adf2; } .content{ background-color: #eee; height: 150px; text-align: center; padding-top:15px; font-size: 16px; } a.smallCell{ text-decoration: none; } </style> <link rel="stylesheet" href="./css/new.css"> <script src="./js/jquery.min.js"></script> </head> <body> <div class="header"> <div class="headerTitle dropDownArea"> <div style="float: left; height: 50px; line-height: 50px;"> <img src="./images/logo.png" width="50" style="float: left; margin-right: 10px;"/> Code-Learner Company </div> <ul> <li>Home</li> <li>Products</li> <li id="btn">Development Department Recruitment</li> <li>Summary</li> </ul> <div id="box" class="showDropDownArea"> <div class="contentArea" > <div class="leftSelect" > <div class="downCell downCell1" data-index="1"> <div class="enName" >Front End Developer</div> </div> <div class="downCell downCell2" data-index="2"> <div class="enName" >Back End Developer</div> </div> <div class="downCell downCell3" data-index="3"> <div class="enName" >Full Stack Developer</div> </div> </div> <div class="rightShow" > <div class="rightBigCell rightIndex1" data-index="1"><a class="smallCell" href="#"> <div class="cellLeftIcon" ><img src="./images/[email protected]" alt="" ></div> <div class="cellRightArea" > <div class="cellRightName" >jQuery Developer</div> <div class="cellRightDesc" >Familiar with jQuery and javascript.</div> </div> </a><a class="smallCell" href="#"> <div class="cellLeftIcon" ><img src="./images/[email protected]" alt="" ></div> <div class="cellRightArea" > <div class="cellRightName" >Html CSS Developer</div> <div class="cellRightDesc" >Six more years in Html CSS development.</div> </div> </a></div> <div class="rightBigCell rightIndex2" data-index="2"><a class="smallCell" href="#"> <div class="cellLeftIcon" ><img src="./images/[email protected]" alt="" ></div> <div class="cellRightArea" > <div class="cellRightName" >Python Developer</div> <div class="cellRightDesc" >Expert in Python, special in Django framework.</div> </div> </a><a class="smallCell" href="#"> <div class="cellLeftIcon" ><img src="./images/[email protected]" alt="" ></div> <div class="cellRightArea" > <div class="cellRightName" >Java Developer</div> <div class="cellRightDesc" >Familiar with j2ee, jdbc and java mail.</div> </div> </a></div> <div class="rightBigCell rightIndex3" data-index="3"><a class="smallCell" href="#"> <div class="cellLeftIcon" ><img src="./images/[email protected]" alt="" ></div> <div class="cellRightArea" > <div class="cellRightName" >Reactjs</div> <div class="cellRightDesc" >Six years+ in Reactjs development.</div> </div> </a><a class="smallCell" href="#"> <div class="cellLeftIcon" ><img src="./images/[email protected]" alt="" ></div> <div class="cellRightArea" > <div class="cellRightName" >Nodejs</div> <div class="cellRightDesc" >Six years+ in Nodejs development.</div> </div> </a></div> </div> </div> </div> </div> </div> <div class="content"> Main Content </div> <script> $().ready(function(){ $('.headerTitle li').hover(function(){ $('.headerTitle li').removeClass('on') $(this).addClass('on') }) $('.downCell').hover(function(){ $('.downCell').removeClass('choosed') $(this).addClass('choosed') console.log($(this).index()) $('.rightBigCell').removeClass('ok') $('.rightIndex'+($(this).index()+1)).addClass('ok') }) }) window.onload = function(){ let btn = document.getElementById('btn'); let box = document.getElementById('box'); btn.onmouseover=(e)=>{ box.style.display = 'block'; document.onmousemove = function(e){ let btnObj = btn.getBoundingClientRect(); let boxObj = box.getBoundingClientRect(); let mouseX = e.clientX; let mouseY = e.clientY; if(mouseX < btnObj.left && mouseY < boxObj.top){ box.style.display = 'none'; } if(mouseX > btnObj.right && mouseY < boxObj.top){ box.style.display = 'none'; } if(mouseY < btnObj.top){ box.style.display = 'none'; } if(mouseY > btnObj.top && mouseY < btnObj.bottom && mouseX > btnObj.left && mouseX < btnObj.right){ box.style.display = 'block'; } } } box.onmouseleave=()=>{ box.style.display = 'none'; $('.headerTitle li').removeClass('on') } } </script> </body> </html>
1.2 css/new.css.
.dropDownArea { color: rgba(0, 0, 0, .8); position: relative; display: inline-block; color: #eee; font-size: 15px; } .dropDownArea.page:hover { color: rgba(0, 0, 0, .8); position: relative; display: inline-block; color: #eee; font-size: 15px; border-color: transparent !important; } .dropDownArea img { vertical-align: baseline !important; } .dropDownArea .myButton { display: inline-block; /*color: #FFF;*/ font-size: 15px; } .dropDownArea { position: relative; } .dropDownArea .showDropDownArea { display: none; display: block; } .dropDownArea .showDropDownArea { display: none; position: absolute; left: 0; top: 80px; transform: translateX(20%); } .dropDownArea .showDropDownArea .contentArea { display: flex; box-sizing: content-box; width: 830px; height: 440px; background: #ffffff; border-radius: 6px; overflow: hidden; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.06); } .dropDownArea .showDropDownArea .contentArea .leftSelect { width: 180px; height: 100%; background: #f4f5f9; } .dropDownArea .showDropDownArea .contentArea .leftSelect .downCell { height: 75px; box-sizing: border-box; padding-left: 30px; display: flex; justify-content: center; flex-direction: column; } .dropDownArea .showDropDownArea .contentArea .leftSelect .downCell .cnName { height: 23px; font-size: 17px; text-align: left; color: #222222; line-height: 23px; font-weight: 600; } .dropDownArea .showDropDownArea .contentArea .leftSelect .downCell .enName { height: 17px; font-size: 12px; text-align: left; color: #999999; line-height: 17px; } .dropDownArea .showDropDownArea .contentArea .leftSelect .downCell.choosed { background: #fff; position: relative; } .dropDownArea .showDropDownArea .contentArea .leftSelect .downCell.choosed:after { position: absolute; content: ""; width: 3px; height: 31px; background: #308eff; left: 0; top: 50%; transform: translateY(-50%); } .dropDownArea .showDropDownArea .contentArea .rightShow { width: 650px; background: #fff; height: 100%; box-sizing: border-box; padding: 15px 34px 14px 23px; } .dropDownArea .showDropDownArea .contentArea .rightShow .rightBigCell { display: flex; justify-content: space-between; width: 594px; height: 137px; box-shadow: 0px -1px 0px 0px #e2e8ee inset; padding: 14px 0; box-sizing: border-box; } .dropDownArea .showDropDownArea .contentArea .rightShow .rightBigCell:last-child { box-shadow: none; } .dropDownArea .showDropDownArea .contentArea .rightShow .rightBigCell .smallCell { height: 100%; display: flex; justify-content: flex-start; align-items: center; width: 280px; cursor: pointer; box-sizing: border-box; padding-left: 40px; border-radius: 12px; } .dropDownArea .showDropDownArea .contentArea .rightShow .rightBigCell .smallCell .cellLeftIcon { flex-shrink: 0; width: 40px; height: 40px; } .dropDownArea .showDropDownArea .contentArea .rightShow .rightBigCell .smallCell .cellLeftIcon img { width: 40px; height: 40px; } .dropDownArea .showDropDownArea .contentArea .rightShow .rightBigCell .smallCell .cellRightArea { margin-left: 11px; } .dropDownArea .showDropDownArea .contentArea .rightShow .rightBigCell .smallCell .cellRightArea .cellRightName { height: 24px; font-size: 18px; text-align: left; color: #222222; line-height: 24px; font-weight: 600; } .dropDownArea .showDropDownArea .contentArea .rightShow .rightBigCell .smallCell .cellRightArea .cellRightDesc { margin-top: 1px; height: 19px; font-size: 14px; text-align: left; color: #999999; line-height: 19px; } .dropDownArea .showDropDownArea .contentArea .rightShow .rightBigCell.ok .smallCell { background-color: #eef6fe; }
1.3 js/jquery.min.js.
The jQuery library file is version 1.8.3, you can go to https://jquery.com/ to download it.
Below is the video demo.