HTMLとCSSだけでハンバーガーメニューを作ろう!!!
4497 ワード
<p>Hello</p>
前の章 Chapter 2 (Part 2)
私たちの世界に知らせる Link here
HTMLとCSSだけでハンバーガーメニュー?はい、それは間違いなく可能です{冗談ではありません}. JavaScript を使用してハンバーガー メニューを作成することは、コーディングの世界に慣れていない場合、少し難しいものです. (文字どおり、JS を使用してハンバーガー メニューを作成するのは難しいことがわかりました).しかし、私はこれに対する解決策を持っています...
この素晴らしいタグ名を知らない人が多い
<details>しかし、この 2 つのタグ (
<summary> も) を使用するだけで、ハンバーガー メニューを作成できます.最初に HTML ファイルを作成します...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hamburger Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
</style>
</head>
<body>
</body>
</html>
次に、本文に
<details> タグを追加します...<!DOCTYPE html>
<html lang="en">
<head>
<title>Hamburger Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<details>
</details>
</body>
</html>
次に、
<summary> タグの下に <details> タグを追加します.<!DOCTYPE html>
<html lang="en">
<head>
<title>Hamburger Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<details>
<summary>Hello There!</summary>
</details>
</body>
</html>
次に、コンテンツを追加します...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hamburger Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<details>
<summary>Hello There!</summary>
<a href="https://inform-our-world.github.io/">My Website</a>
<a href="https://inform-our-world.github.io/Saqha/CH 2.2">Latest Chapter</a>
</details>
</body>
</html>
ええ、ハンバーガー メニューが作成されました.しかし、あなたは何かに気付くことができますか?それはテキストの前の矢印です.私たちもそれを隠すことができます!!!
追加するだけ...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hamburger Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
details > summary {
list-style: none;
}
</style>
</head>
<body>
<details>
<summary>Hello There!</summary>
<a href="https://inform-our-world.github.io/">My Website</a>
<a href="https://inform-our-world.github.io/Saqha/CH 2.2">Latest Chapter</a>
</details>
</body>
</html>
より適切にするために、
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hamburger Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
details > summary {
list-style: none;
}
details {
cursor: pointer;
}
</style>
</head>
<body>
<details>
<summary>Hello There!</summary>
<a href="https://inform-our-world.github.io/">My Website</a>
<a href="https://inform-our-world.github.io/Saqha/CH 2.2">Latest Chapter</a>
</details>
</body>
</html>
ハンバーガーメニューができました!!!
<a> タグの下線を非表示にする方法は、以前の投稿を参照してください...ありがとうございました😁
Reference
この問題について(HTMLとCSSだけでハンバーガーメニューを作ろう!!!), 我々は、より多くの情報をここで見つけました https://dev.to/subhransuindia/create-a-hamburger-menu-using-only-html-and-css-12kiテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol