时间：2023-07-05 21:15:02 | 来源：网站运营
时间：2023-07-05 21:15:02 来源：网站运营
LEARNING WEB DESIGN 之菜单示例：
在线咨询
/* flex 制作网页菜单栏 */<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 内容 - 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; /*这一步是手工计算高度的结果, 简直是个锤子*/}.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 浏览器内置的 javascript属性. // 实测: 如下步骤即可让菜单顺利出入else if (toggleNavStatus === true) { getSidebar.style.width = "50px"; getSidebarUl.style.visibility = "hidden"; toggleNavStatus = false;}实现原理, `.collapsible`collapsible 菜单部分,作为菜单关闭状态时,所用的固定的类存在,它不起 css 的格式化的作用, 它仅仅作为作为js 的查找目标. `.collapsible--expanded .collapsible--content` 作为菜单的展开状态时的组合类, 最终通过 js 代码实现二者的切换. 同样的, 如果菜单是展开的模式, 那么 class 为组合类 - collapsible collapsible--expanded.
通过.collapsible作为查找目标, 在click (div top 级包裹的所有元素)动作后, 找到它就变成
`collapsible collapsible--expanded`, 从而实现菜单从收拢到展开的效果.
如果存在.collapsible collapsible--expanded,
那么就变为 `collapsible`, 从而实现菜单从展开到收拢的效果.
(经试验collapsible改为collapsible--expanded后, 直接展开, 无法实现动态效果).
其中 HTML 部分的关键是, 第一, top 级的 class 中要有 collapsible 的类, 第二, top 级包含的部分, 要有 `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>关键点是在 inspect 中, 更改 collapsbile--expanded 的字数, 即可实现菜单隐藏和显示, 那么意味着通过添加这个类 `collapsible--expanded` 来expand 扩展这个菜单. # 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"); }));这段代码实现的是如下这部分的功能. .collapsible--expanded .collapsible__content {max-height: 100vh;}.collapsible__content {max-height: 0;overflow:hidden;}/*这里, 通过 max-height(或者 max-width)以及 overflow 的设置隐藏溢出从而实现视觉上的隐藏效果.所以, 在一个菜单中, 这是必备部分.*/.collapsible--expanded .collapsible__content {max-height: 100vh;}/* 这个是javascript 实现的动态插入部分, 所有增加了这个菜单的部分, 将实现隐藏部分的显示.*/javascript 注意事项
js 地址应该设置为<script src="../js/main.js"></script>, 跨目录路径开头必须是两个点, 否则不生效.
# 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 设置/* 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; }}# 错过最佳写教程的时机了...15 个工作日吧, 每天 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 网站 菜单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 是一个只读属性，返回一个元素的类属性的实时 DOMTokenList 集合。DOMTokenList 接口表示一组空格分隔的标记（tokens)DOMTokenList 接口的 toggle() 方法, 从列表中删除一个给定的标记 并返回 false 。 如果标记 不存在，则添加并且函数返回 true。关键词：示例
