CSS JS 自适应菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Menu</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background:#66ff88;
}
.menu {
width: 100%;
background: #333;
color: white;
padding: 10px;
display: flex;
justify-content: flex-end; /* 将菜单项移动到容器的末尾 */
align-items: center;
position: absolute; /* 绝对定位 */
top: 0;
right: 0; /* 将菜单放置在右上角 */
}
.menu-items {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.menu-items li {
padding: 0 10px;
}
.menu-items li a {
color: white;
text-decoration: none;
}
.menu-icon {
display: none;
font-size: 1.5em;
cursor: pointer;
margin-left: auto; /* 将菜单图标放置在导航栏的右侧 */
}
@media (max-width: 768px) {
.menu-items {
display: none;
flex-direction: column;
width: 22%;
background: #333;
}
.menu-icon {
display: block;
}
.menu.active .menu-items {
display: flex;
position: absolute;
top: 100%; /* 菜单项在菜单栏的下方显示 */
right: 0; /* 保持菜单项在右侧 */
}
.menu-items li a {
color: white;
text-decoration: none;
line-height:30px;
}
}
</style>
</head>
<body>
<nav class="menu">
<div class="menu-icon" id="toggleMenu">☰</div>
<ul class="menu-items">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<script>
document.getElementById('toggleMenu').addEventListener('click', function() {
document.querySelector('.menu').classList.toggle('active');
});
</script>
</body>
</html>
sample2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Menu</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background:#66ff88;
}
.menu {
width: 100%;
background: #333;
color: white;
padding: 10px;
display: flex;
justify-content: flex-end; /* 将菜单项移动到容器的末尾 */
align-items: center;
position: absolute; /* 绝对定位 */
top: 0;
right: 0; /* 将菜单放置在右上角 */
}
.menu-items {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.menu-items li {
padding: 0 10px;
}
.menu-items li a {
color: white;
text-decoration: none;
}
.menu-icon {
display: none;
font-size: 1.5em;
cursor: pointer;
margin-left: auto; /* 将菜单图标放置在导航栏的右侧 */
}
@media (max-width: 768px) {
.menu-items {
display: none;
flex-direction: column;
width: 22%;
background: #333;
}
.menu-icon {
display: block;
}
.menu.active .menu-items {
display: flex;
position: absolute;
top: 100%; /* 菜单项在菜单栏的下方显示 */
right: 0; /* 保持菜单项在右侧 */
}
.menu-items li a {
color: white;
text-decoration: none;
line-height:30px;
}
}
.main{
min-width:177px;
min-height:166px;
background-color:red;
margin: 0 auto;
margin-left:33px;
margin-right:33px;
}
</style>
</head>
<body>
<nav class="menu">
<div class="menu-icon" id="toggleMenu">☰</div>
<ul class="menu-items">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="main">
<section>
div+css网页模板下载_div+css网站模板下载-17素材网
div+css主要分为htmldiv+css网页模板下载、psddiv+css网站模板下载、htmldiv+css网站模板下载、psddiv+css网页模板下载。
17素材网
divcss(一种网页的布局方法) - 百度百科
DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于...详情
方法
发展
优先级
使用误区
百度百科
html5+css3网页设计与制作-猪八戒网-一站式网站建设平台
猪八戒网,累积十六年大平台,专业网站建设公司,高端网站制作领跑者,数千家企业网站设计案例.1对1的专业网站定制开发
APP开发
网站建设
微信开发
小程序开发
猪八戒股份有限公司 2024-05广告
用DIV+CSS技术制作一个简单的网页 我的家乡主题_盒子制作...
2022年11月16日 2.网页编辑:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作)。...
CSDN博客
divcss网页模版图片_divcss网页模版素材_divcss网页模版模...
2024年4月9日 六图网为您提供divcss网页模版设计作品免费下载服务,您还可以找到divcss网页模版图片、divcss网页模版素材、divcss网页模版模板等设计素材,我们为您提供divcss网页模版图片下载,divc...
六图网
大家还在搜
</section>
</div>
<script>
document.getElementById('toggleMenu').addEventListener('click', function() {
document.querySelector('.menu').classList.toggle('active');
});
</script>
</body>
</html>
fffffffffffffffff
test red font.
