效果圖 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/reset.css"> <link ...
效果圖
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- 導航nav --> <header class="cd-main-header"> <a class="cd-logo" href="#0"><img src="images/cd-logo.svg" alt="Logo"></a> <ul class="cd-header-buttons"> <li><a class="cd-search-trigger" href="#cd-search">Search<span></span></a></li> <li><a class="cd-nav-trigger" href="#cd-primary-nav">Menu<span></span></a></li> </ul> </header> <main class="cd-main-content"> <div class="cd-overlay"></div> </main> <!-- 右側導航內容 --> <nav class="cd-nav"> <ul id="cd-primary-nav" class="cd-primary-nav is-fixed"> <li class="has-children first-nav"> <a href="#">Clothing</a> <!-- 一級導航 --> <ul class="cd-secondary-nav is-hidden"> <li class="go-back"><a href="#0">Menu</a></li> <li class="see-all"><a href="#">All Clothing</a></li> <li class="has-children"> <a href="#">Accessories</a> <!-- 二級導航 --> <ul class="is-hidden"> <li class="go-back"><a href="#0">Clothing</a></li> <li class="see-all"><a href="#">All Accessories</a></li> <li class="has-children"> <a href="#0">Beanies</a> <!-- 三級導航 --> <ul class="is-hidden"> <li class="go-back"><a href="#0">Accessories</a></li> <li class="see-all"><a href="#">All Benies</a></li> <li><a href="#">Caps & Hats</a></li> <li><a href="#">Gifts</a></li> <li><a href="#">Scarves & Snoods</a></li> </ul> </li> <li class="has-children"> <a href="#0">Caps & Hats</a> <ul class="is-hidden"> <li class="go-back"><a href="#0">Accessories</a></li> <li class="see-all"><a href="#">All Caps & Hats</a></li> <li><a href="#">Beanies</a></li> <li><a href="#">Caps</a></li> <li><a href="#">Hats</a></li> </ul> </li> <li><a href="#">Glasses</a></li> <li><a href="#">Gloves</a></li> <li><a href="#">Jewellery</a></li> <li><a href="#">Scarves</a></li> <li><a href="#">Wallets</a></li> <li><a href="#">Watches</a></li> </ul> </li> <li class="has-children"> <a href="#">Bottoms</a> <ul class="is-hidden"> <li class="go-back"><a href="#0">Clothing</a></li> <li class="see-all"><a href="#">All Bottoms</a></li> <li><a href="#">Casual Trousers</a></li> <li class="has-children"> <a href="#0">Jeans</a> <ul class="is-hidden"> <li class="go-back"><a href="#0">Bottoms</a></li> <li class="see-all"><a href="#">All Jeans</a></li> <li><a href="#">Ripped</a></li> <li><a href="#">Skinny</a></li> <li><a href="#">Slim</a></li> <li><a href="#">Straight</a></li> </ul> </li> <li><a href="#0">Leggings</a></li> <li><a href="#0">Shorts</a></li> </ul> </li> <li class="has-children"> <a href="#">Jackets</a> <ul class="is-hidden"> <li class="go-back"><a href="#0">Clothing</a></li> <li class="see-all"><a href="#">All Jackets</a></li> <li><a href="#">Blazers</a></li> <li><a href="#">Bomber jackets</a></li> <li><a href="#">Denim Jackets</a></li> <li><a href="#">Duffle Coats</a></li> <li><a href="#">Leather Jackets</a></li> <li><a href="#">Parkas</a></li> </ul> </li> <li class="has-children"> <a href="#">Tops</a> <ul class="is-hidden"> <li class="go-back"><a href="#0">Clothing</a></li> <li class="see-all"><a href="#">All Tops</a></li> <li><a href="#">Cardigans</a></li> <li><a href="#">Coats</a></li> <li><a href="#">Hoodies & Sweatshirts</a></li> <li><a href="#">Jumpers</a></li> <li><a href="#">Polo Shirts</a></li> <li><a href="#">Shirts</a></li> <li class="has-children"> <a href="#0">T-Shirts</a> <ul class="is-hidden"> <li class="go-back"><a href="#0">Tops</a></li> <li class="see-all"><a href="#">All T-shirts</a></li> <li><a href="#">Plain</a></li> <li><a href="#">Print</a></li> <li><a href="#">Striped</a></li> <li><a href="#">Long sleeved</a></li> </ul> </li> <li><a href="#">Vests</a></li> </ul> </li> </ul> </li> <li class="has-children first-nav"> <a href="#">Gallery</a> <ul class="cd-nav-gallery is-hidden"> <li class="go-back"><a href="#0">Menu</a></li> <li class="see-all"><a href="#">Browse Gallery</a></li> <li> <a class="cd-nav-item" href="#"> <img src="images/img.jpg" alt="Product Image"> <h3>Product #1</h3> </a> </li> <li> <a class="cd-nav-item" href="#"> <img src="images/img.jpg" alt="Product Image"> <h3>Product #2</h3> </a> </li> <li> <a class="cd-nav-item" href="#"> <img src="images/img.jpg" alt="Product Image"> <h3>Product #3</h3> </a> </li> <li> <a class="cd-nav-item" href="#"> <img src="images/img.jpg" alt="Product Image"> <h3>Product #4</h3> </a> </li> </ul> </li> <li class="has-children first-nav"> <a href="#">Services</a> <ul class="cd-nav-icons is-hidden"> <li class="go-back"><a href="#0">Menu</a></li> <li class="see-all"><a href="#">Browse Services</a></li> <li> <a class="cd-nav-item item-1" href="#"> <h3>Service #1</h3> <p>This is the item description</p> </a> </li> <li> <a class="cd-nav-item item-2" href="#"> <h3>Service #2</h3> <p>This is the item description</p> </a> </li> <li> <a class="cd-nav-item item-3" href="#"> <h3>Service #3</h3> <p>This is the item description</p> </a> </li> <li> <a class="cd-nav-item item-4" href="#"> <h3>Service #4</h3> <p>This is the item description</p> </a> </li> <li> <a class="cd-nav-item item-5" href="#"> <h3>Service #5</h3> <p>This is the item description</p> </a> </li> <li> <a class="cd-nav-item item-6" href="#"> <h3>Service #6</h3> <p>This is the item description</p> </a> </li> <li> <a class="cd-nav-item item-7" href="#"&
