時(shí)間：2023-07-05 21:15:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-05 21:15:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)
LEARNING WEB DESIGN 之菜單示例：
在線咨詢
/* flex 制作網(wǎng)頁(yè)菜單欄 */<style> ul { display: flex; align-items: center; padding: 50px; background: #00af8f; } li { margin:0 20px; list-style: none; } li.logo { margin-right: auto; }</style><body> <ul> <li class="logo"><img class="logo" src="../Test/images/logo.png" alt="logo"></li> <li>About</li> <li>Blog</li> <li>Shop</li> <li class="menu" >Contact</li> </ul></body>.container { display: flex; flex-wrap: wrap; border: 1px solid dodgerblue; height: 80vh;; justify-content: center; align-content:center; } .box { background: gold; width: 25%; height: 25%; margin: 1px; }<div class="container"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> <div class="box box4">4</div> <div class="box box5">5</div> </div><!doctype html><html><head><meta charset="UTF-8"><title>Flexbox Product Listing Exercise</title><style>html { box-sizing: border-box;}*, *:before, *:after { box-sizing: inherit;}body { font-family: Georgia, serif; line-height: 1.5em;}h1 { font-size: 4em; font-weight: normal;}h2 { font-size: 1.2em; margin-top: 0;}#menu { border: 3px solid #783F27; display: flex; flex-direction:row; flex-wrap: wrap; flex-flow:row wrap; align-items: stretch; justify-content: left; }section { background: #F6F3ED; margin: 10px; padding: 20px; border: 1px dotted maroon; width: 240px; display:flex; flex-direction: column;}.title { background-color: #783F27; color: #F9AB33; line-height: 4em;}.price { font-weight: bold; background: #F9AB33; padding: 5px; width: 100%; text-align: center; margin-top: auto;}</style></head><body><div id="menu"> <section class="title"> <h1>Bistro Items To Go</h1> </section> <section class="dish"> <h2>1<br>Black bean purses</h2> <p class="info">Spicy black bean and a blend of Mexican cheeses wrapped in sheets of phyllo and baked until golden.</p> <p class="photo"><img src="table.jpg" alt=""></p> <p class="price">$3.95</p> </section> <section class="dish"> <h2>2<br>Southwestern Napoleons</h2> <p class="info">Layers of light lump crab meat, bean, and corn salsa, and our handmade flour tortillas.</p> <p class="photo"><img src="table.jpg" alt=""></p> <p class="price">$7.95</p> </section> <section class="dish"> <h2>3<br>Coconut-Corn Chowder</h2> <p class="info">This vegan chowder with potatoes and corn in a coconut broth is light and delicious.</p> <p class="photo"><img src="table.jpg" alt=""></p> <p class="price">$3.95</p> </section> <section class="dish"> <h2>4<br>Jerk Rotisserie Chicken</h2> <p class="info">Tender chicken slow roasted on the rotisserie, flavored with spicy and fragrant jerk sauce and served with fried plantains and sliced mango. <em>Warning, very spicy!</em></p> <p class="photo"><img src="table.jpg" alt=""></p> <p class="price">$12.95</p> </section> <section class="dish"> <h2>5<br>Thai Shrimp Kebabs</h2> <p class="info">Skewers of shrimp marinated in lemongrass, garlic, and fish sauce then grilled to perfection.</p> <p class="photo"><img src="table.jpg" alt=""></p> <p class="price">$12.95</p> </section> <section class="dish"> <h2>6<br>Pasta Puttanesca</h2> <p class="info">A rich tomato sauce simmered with garlic, olives, capers, anchovies, and plenty of hot red pepper flakes.</p> <p class="photo"><img src="table.jpg" width="200" height="100" alt=""></p> <p class="price">$12.95</p> </section></div></body></html><!-- How to Create a Toggle Menu -Dan --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../Test/dan.css"> <link rel="stylesheet" href="../Test/reset.css"></head><body> <nav class="nav-main"> <div class="btn-toggle-nav" onclick="toggleNav()"></div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">About US</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <aside class="nav-sidebar"> <ul> <li><span>Projects</span></li> <li><a href="#">Making a website</a></li> <li><a href="#">Creating a Video</a></li> <li><a href="#">SEO Optimizing a website</a></li> <li><a href="#">Walking through the park</a></li> <li><a href="#">Just another day</a></li> </ul> </aside> <script src="../Test/dan.js"></script></body></html>外觀CSS/* CSS 內(nèi)容 - How to Create a Toggle Menu Dan */body { background-color: #f1f1f1;}.nav-main { position: fixed; top: 0; width: 100%; height:60px; background-color: #FFF; display: flex; flex-wrap: wrap; z-index: 1000;}.btn-toggle-nav { width: 60px; height: 100%; background-color: #F98F39; background-image: url("../Test/images/hmenu.png"); background-repeat: no-repeat; background-size: 100%; background-position: center; cursor: pointer;}.btn-toggle-nav:hover { opacity: 0.5;} .nav-main ul { display: flex; flex-wrap: wrap; padding-left: 15px;} .nav-main ul li { list-style: none; line-height: 60px; /*這一步是手工計(jì)算高度的結(jié)果, 簡(jiǎn)直是個(gè)錘子*/}.nav-main ul li a { display: block; height: 100%; padding: 0 10px; text-transform: uppercase; text-decoration: none; color: #111; font-family: Arial, Helvetica, sans-serif; font-size: 16px;}.nav-sidebar { position: fixed; left: 0; bottom: 0; width: 50px; height: calc(100vh - 60px); padding: 0 5px; background-color:#1b1b1b; z-index: 1000;}.nav-sidebar ul { padding-top: 15px; overflow: hidden; visibility: hidden;}.nav-sidebar ul li { line-height: 60px; list-style: none;} .nav-sidebar ul li span, .nav-sidebar ul li a { display: block; height: 60px; padding: 0 10px; text-decoration: none; text-transform: uppercase; color: #FFF; font-family: arial; font-size: 16px; white-space: nowrap;}.nav-sidebar ul li a:hover { background-color: #222;}dropdown can be done in pure CSSlet toggleNavStatus = false;let toggleNav = function() { let getSidebar = document.querySelector(".nav-sidebar"); let getSidebarUl = document.querySelector(".nav-sidebar ul"); let getSidebarTitle = document.querySelector(".nav-sidebar span"); let getSidebarLinks = document.querySelectorAll(".nav-sidebar a");if (toggleNavStatus === false) { getSidebarUl.style.visibility = "visible"; getSidebar.style.width = "272px"; getSidebarTitle.style.opacity = "0.5"; let arrayLength = getSidebarLinks.length; for (let i = 0; i < arrayLength; i++) { getSidebarLinks[i].style.opacity = "1"; } toggleNavStatus = true; } else if (toggleNavStatus === true) { getSidebar.style.width = "50px"; getSidebarTitle.style.opacity = "0"; let arrayLength = getSidebarLinks.length; for (let i = 0; i < arrayLength; i++) { getSidebarLinks[i].style.opacity = "0"; } getSidebarUl.style.visibility = "hidden"; toggleNavStatus = false; }}// navigation is closed as a default. so false.//create a anonymous functionfunction in order to not host anything inside the browser.//Concept: documents: Which is the index.HTML page. because we link to it punctuation.// Javascript method: Query Selector. we can use in order to, grab HTML items from inside our website and all the constant in between the HTML tags. // document.querySelector(".nav-sidebar"); "." is class. "#" is id.// Concept: querySelectorALL. it grabs all the instances of this specific path(.nav-sidebar a) that we wrote in here, which means that we have all the anchor tags inside the sidebar, and it takes all of them and puts them inside an array for us to use later.// The "".length" property of an object, returns the number of elements in that array.// FYI. Function Name: when we grab something in any sort of programming language, we usually use the keyword gets in front of the name, want to change something we call it set something.// target: 1 when I do actually click the button to open up the navigation, I want to change the width of the sidebar to something that does actually fit all the content we have.// down here inside the sidebar so we're going to grab the navigation or the the sidebar and then we're going to tell it using javascript to change the CSS.// step 1.// step 2: create the function that does actually open and close the menu.// step 3: create a anonymous functionfunction in order to not host anything inside the browser.// onclick 瀏覽器內(nèi)置的 javascript屬性. // 實(shí)測(cè): 如下步驟即可讓菜單順利出入else if (toggleNavStatus === true) { getSidebar.style.width = "50px"; getSidebarUl.style.visibility = "hidden"; toggleNavStatus = false;}實(shí)現(xiàn)原理, `.collapsible`collapsible 菜單部分,作為菜單關(guān)閉狀態(tài)時(shí),所用的固定的類存在,它不起 css 的格式化的作用, 它僅僅作為作為js 的查找目標(biāo). `.collapsible--expanded .collapsible--content` 作為菜單的展開(kāi)狀態(tài)時(shí)的組合類, 最終通過(guò) js 代碼實(shí)現(xiàn)二者的切換. 同樣的, 如果菜單是展開(kāi)的模式, 那么 class 為組合類 - collapsible collapsible--expanded.
通過(guò).collapsible作為查找目標(biāo), 在click (div top 級(jí)包裹的所有元素)動(dòng)作后, 找到它就變成
`collapsible collapsible--expanded`, 從而實(shí)現(xiàn)菜單從收攏到展開(kāi)的效果.
如果存在.collapsible collapsible--expanded,
那么就變?yōu)?`collapsible`, 從而實(shí)現(xiàn)菜單從展開(kāi)到收攏的效果.
(經(jīng)試驗(yàn)collapsible改為collapsible--expanded后, 直接展開(kāi), 無(wú)法實(shí)現(xiàn)動(dòng)態(tài)效果).
其中 HTML 部分的關(guān)鍵是, 第一, top 級(jí)的 class 中要有 collapsible 的類, 第二, top 級(jí)包含的部分, 要有 `collapsible__content` .
# collapsible 菜單<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/styles.css"></head><body style="background-color: gray;"> <div class="collapsible collapsible--expanded"> <header class="collapsible__header"> <h2 class="collapsible__heading">Item 1</h2> <span class="icon-container"> <svg class="icon icon--white collapsible__cheron"> <use xlink:href="images/sprite.svg#chevron"></use> </svg> </span> </header> <div class="collapsible__content"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt mollitia officia ipsum ab doloremque laborum debitis asperiores ipsam ea non! </div> </div> <script src="js/main.js"></script></body></html>關(guān)鍵點(diǎn)是在 inspect 中, 更改 collapsbile--expanded 的字?jǐn)?shù), 即可實(shí)現(xiàn)菜單隱藏和顯示, 那么意味著通過(guò)添加這個(gè)類 `collapsible--expanded` 來(lái)expand 擴(kuò)展這個(gè)菜單. # Collapsible 的 css 部分.collapsible__header {display: flex;justify-content: space-between;}.collapsible__heading {font-size: 3rem;margin-top: 0;}.collapsible__chevron {transform: rotate(-90deg);}.collapsible__content {max-height: 0;overflow:hidden;}.collapsible--expanded .collapsible__chevron {transform: rotate(0);}.collapsible--expanded .collapsible__content {max-height: 100vh;}## JSconst collapsibles = document.querySelectorAll(".collapsible");collapsibles.forEach((item) => item.addEventListener("click", function () { this.classList.toggle("collapsible--expanded"); }));這段代碼實(shí)現(xiàn)的是如下這部分的功能. .collapsible--expanded .collapsible__content {max-height: 100vh;}.collapsible__content {max-height: 0;overflow:hidden;}/*這里, 通過(guò) max-height(或者 max-width)以及 overflow 的設(shè)置隱藏溢出從而實(shí)現(xiàn)視覺(jué)上的隱藏效果.所以, 在一個(gè)菜單中, 這是必備部分.*/.collapsible--expanded .collapsible__content {max-height: 100vh;}/* 這個(gè)是javascript 實(shí)現(xiàn)的動(dòng)態(tài)插入部分, 所有增加了這個(gè)菜單的部分, 將實(shí)現(xiàn)隱藏部分的顯示.*/javascript 注意事項(xiàng)
js 地址應(yīng)該設(shè)置為<script src="../js/main.js"></script>, 跨目錄路徑開(kāi)頭必須是兩個(gè)點(diǎn), 否則不生效.
# Navigation HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="../Test/style.css"></head><body> <nav class="nav collapsible"> <a href="#"><img class="nav__brand" src="../Test/images/logo.svg" alt=""></a> <svg class="icon icon--white nav__toggler"> <use xlink:href="images/sprite.svg#menu"></use> </svg> <ul class="list nav__list collapsible__content"> <li class="nav__item"><a href="#">Hosting</a></li> <li class="nav__item"><a href="#">VPS</a></li> <li class="nav__item"><a href="#">Domain</a></li> <li class="nav__item"><a href="#">Pricing</a></li> </ul> </nav> <script src="../js/main.js"></script></body></html> Navigation CSS 設(shè)置/* Navigation */.nav { background: #000; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0 1rem; align-items: center;}.nav__list { width: 100%; margin:0;}.nav__item { padding: 0.5rem 2rem; border-bottom: 1px solid #222;}.nav__item > a { color:#d2d0db; transition: color .3s;}.nav__item > a:hover { color:#fff;}.nav__toggler { opacity: 0.5; transition: box-shadow .15s; cursor:pointer;}.nav.collapsible--expanded .nav__toggler { opacity: 1; box-shadow: 0 0 0 3px; border-radius: 5px;}.nav__brand { transform: translateY(5px);}@media screen and (min-width: 768px) { .nav__toggler { display: none; } .nav__list { width: auto; display: flex; font-size: 1.6rem; max-height: 100%; opacity: 1; } .nav__item { border-bottom: 0; }}# 錯(cuò)過(guò)最佳寫(xiě)教程的時(shí)機(jī)了...15 個(gè)工作日吧, 每天 2 hours ++# Collapsible and Navigation 菜單 HTML 部分 <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="../Test/style.css"></head><body> <div class="collapsible collapsible--expanded"> <header class="collapsible__header"> <h2 class="collapsible__heading">Products</h2> <svg class="icon icon--primary collapsible__chevron"> <use xlink:href="images/sprite.svg#chevron"></use> </svg> </header> <div class="collapsible__content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, delectus! Possimus, est dignissimos fugit placeat omnis accusamus quod obcaecati nulla. </div> </div> <div style="height: 100px; border: 1px solid orange;"></div> <nav class="nav collapsible"> <a href="#"><img src="../Test/images/logo.svg" alt=""></a> <svg class="icon icon--primary"> <use xlink:href="images/sprite.svg#menu"></use> </svg> <ul class="collapsible__list collapsible__content"> <li class="collapsible__item"><a href="#">Hosting</a></li> <li class="collapsible__item"><a href="#">Hosting</a></li> <li class="collapsible__item"><a href="#">Hosting</a></li> <li class="collapsible__item"><a href="#">VPS</a></li> </ul> </nav> <script src="../js/main.js"></script></body>/* CSS Collapsibles */.collapsible__header { display: flex; justify-content: space-between;}.collapsible__heading { margin-top: 0;}.collapsible__content { max-height: 0; overflow: hidden;}.collapsible__chevron { transform: rotate(-90deg);}.collapsible--expanded .collapsible__content { max-height: 100vh;}.collapsible--expanded .collapsible__chevron { transform: rotate(0);} /* Navigation */ .nav { background: #9D9D9D; display: flex; justify-content: space-between; flex-wrap: wrap; } .collapsible__list { width: 100%; }/*Moshify 網(wǎng)站 菜單javascript*/const collapsibles = document.querySelectorAll(".collapsible");collapsibles.forEach((item) => item.addEventListener("click", function () { this.classList.toggle("collapsible--expanded"); }));CSS Nesting.
CSS nesting allows us to nest CSS selectors and properties inside one another thus creating more specific selector scope.
Element.classList 是一個(gè)只讀屬性，返回一個(gè)元素的類屬性的實(shí)時(shí) DOMTokenList 集合。DOMTokenList 接口表示一組空格分隔的標(biāo)記（tokens)DOMTokenList 接口的 toggle() 方法, 從列表中刪除一個(gè)給定的標(biāo)記 并返回 false 。 如果標(biāo)記 不存在，則添加并且函數(shù)返回 true。關(guān)鍵詞：示例
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
