弹来弹去跑马灯!

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>

　　

 

posted @ 2024-05-09 16:04  wgscd  阅读(46)  评论(0)    收藏  举报