css点击显示右侧菜单栏 |css 世界地图

/* HTML */
<div class="container">
<div class="left-panel">
<button id="show-right-panel">显示右侧菜单栏</button>
</div>
<div class="right-panel">
<button id="hide-right-panel">隐藏右侧菜单栏</button>
<ul class="menu">
<li><a href="#">菜单项1</a></li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
</ul>
</div>
</div>
/* CSS */
.container {
display: flex;
height: 100%;
}
.left-panel {
width: 80%;
background-color: #eee;
padding: 20px;
}
.right-panel {
width: 20%;
background-color: #ccc;
position: fixed;
right: -20%;
top: 0;
bottom: 0;
transition: right 0.5s ease-out;
}
.show-right-panel .right-panel {
right: 0;
}
.menu {
list-style: none;
padding: 0;
margin: 20px;
}
#hide-right-panel {
position: absolute;
right: 0;
top: 0;
}

以上代码使用了CSS中的布局方式flex，通过给左侧面板和右侧面板都设置宽度，通过position:fixed将右侧面板固定在屏幕右侧，并通过right属性将它移出屏幕。使用transition属性使它的位置从右边滑入屏幕内。

在HTML中给左侧面板添加了一个按钮，用于触发右侧面板的显示。给右侧面板也添加了一个按钮，用于隐藏自己。

CSS中使用了伪类选择器.show-right-panel，将它应用到右侧面板，使其到屏幕右侧时可以通过点击左侧面板的按钮展示。其中的class名字可以随意定义，只要保证在CSS和JavaScript中使用的一致即可。

通过这种方式，可以很方便地实现一个可交互的网站布局，并且增强用户体验。