弹来弹去跑马灯!

CSS JS 自适应菜单

 

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!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:

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!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 @   wgscd  阅读(22)  评论(0)  编辑  收藏  举报
相关博文：
·  js操作shadow-root内的DOM元素
·  JS MutationObserver监听DOM元素改变
·  jQuery-响应式-Web-设计-全-
·  使用css实现一个响应式汉堡包菜单
·  Web-设计实战-全-
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
历史上的今天：
2019-05-09 WPF UI Close button
点击右上角即可分享
微信分享提示
AI IDE Trae