div+css布局实现顶部导航条消息通知点击下拉显示消息列表效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css布局实现顶部导航条消息通知点击下拉显示消息列表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Oxygen:wght@700&family=Work+Sans:wght@300;500&display=swap");
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: "Work Sans", sans-serif !important;
	background-color: #f2f8ff;
	color: #333;
}

.header {
	padding: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	position: fixed;
	width: calc(100% - 250px);
	top: 0;
	left: 250px;
	z-index: 1000;
	min-height: 70px;
	box-shadow: 0 5px 20px -17px rgba(0, 0, 0, 0.34);
}

.sidebar {
	max-height: 70px;
	background: #030110;
	height: 100vh;
	position: fixed;
	width: 250px;
}

.bell-con {
	color: #030110;
}

.notification-icon {
	display: flex;
	position: relative;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.03);
	padding: 10px;
	border-radius: 60%;
}

.notification-tray {
	display: none;
	position: absolute;
	right: 20px;
	top: 90px;
	background-color: #fff;
	box-shadow: 0 5px 20px -17px rgba(0, 0, 0, 0.34);
	width: 300px;
	max-height: 350px;
	z-index: 100;
	overflow-y: auto;
}

.notification-header {
	padding: 10px;
	background: rgb(221 232 243);
}

.notification-item {
	padding: 10px;
	display: flex;
	align-items: center;
	gap: 5px;
	border-bottom: 1px solid #eee;
	cursor: pointer;
}

box-icon {
	margin-left: 5px;
}

.notification-content {
	margin-left: 10px;
}

.notification-title {
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 5px;
	color: #030110;
}

.notification-description {
	font-size: 12px;
	color: #787781;
}

.pulse {
	display: none;
	position: absolute;
	top: -1px;
	right: -2px;
	width: 13px;
	height: 13px;
	background-color: red;
	border-radius: 50%;
	border: 2px solid white;
	animation: pulse 2s infinite ease-in;
}

@keyframes pulse {
	0% {
		transform: scale(0.75);
		opacity: 0.5;
	}
	50% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(0.75);
		opacity: 0.5;
	}
}

#notificationCount:not(:empty) ~ .pulse {
	display: block;
}

#logo {
	margin-left: 7.5%;
}

.search-input {
	margin-left: 30px;
	border: none;
	outline: none;
	width: 100%;
	padding: 5px;
	font-size: 13px;
}

.footer {
	position: fixed;
	bottom: 10px;
	right: 10px;
	color: black;
	font-size: 12px;
	text-align: right;
	font-family: monospace;
}

.footer a {
	color: black;
	text-decoration: none;
}
</style>

  
  
</head>

<body translate="no">
  <div class="sidebar">
	<svg id="logo" width="85%" height="72" viewBox="0 0 152 19" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M75.693 16.374H70.573V2.686H75.693V16.374ZM71.073 15.874H75.193V3.186H71.073V15.874ZM82.817 16.374H77.8V2.686H88.282C89.7836 2.5644 91.279 2.98597 92.496 3.874C93.0199 4.35331 93.426 4.94719 93.6825 5.60929C93.9391 6.2714 94.0392 6.98383 93.975 7.691C94.0498 8.91297 93.6609 10.1182 92.886 11.066C91.969 12.118 90.443 12.66 88.351 12.679C87.824 12.693 83.875 12.679 82.82 12.679L82.817 16.374ZM78.297 15.874H82.317V12.174H82.568C82.619 12.174 87.746 12.19 88.339 12.174C90.288 12.157 91.689 11.674 92.508 10.731C93.1978 9.87345 93.5404 8.78815 93.468 7.69C93.5295 7.05637 93.4442 6.41709 93.2188 5.82174C92.9933 5.22639 92.6338 4.69097 92.168 4.257C91.0396 3.4471 89.659 3.06693 88.275 3.185H78.3L78.297 15.874ZM87.22 9.604H82.283V5.878H87.253C87.6053 5.82932 87.9642 5.87044 88.2963 5.99753C88.6285 6.12463 88.9232 6.33358 89.153 6.605C89.3615 6.95194 89.4598 7.35398 89.435 7.758C89.4537 8.1331 89.3727 8.50647 89.2 8.84C88.9629 9.12588 88.6562 9.34595 88.3094 9.47905C87.9627 9.61215 87.5875 9.6538 87.22 9.6V9.604ZM82.783 9.104H87.22C88.04 9.104 88.548 8.933 88.773 8.581C88.8969 8.32515 88.953 8.04176 88.936 7.758C88.9579 7.46006 88.8933 7.16214 88.75 6.9L88.744 6.891C88.506 6.541 88.033 6.378 87.253 6.378H82.783V9.104ZM103.1 16.576C98.61 16.576 95.93 15.461 94.909 13.168C94.7419 12.7251 94.6285 12.2638 94.571 11.794L94.527 11.506H99.869L99.904 11.716C99.9451 11.9292 100.036 12.1299 100.168 12.302C100.379 12.557 101.083 12.985 103.419 12.985C106.227 12.985 106.227 12.492 106.227 12.227C106.227 11.78 105.902 11.627 103.612 11.383L103.177 11.342C102.315 11.261 101.225 11.158 100.727 11.115C96.527 10.735 94.652 9.43 94.652 6.885C94.652 4.212 97.843 2.485 102.782 2.485C106.811 2.485 109.407 3.547 110.496 5.644C110.754 6.13178 110.928 6.65999 111.009 7.206L111.044 7.487H105.696L105.674 7.261C105.653 7.08438 105.578 6.91869 105.458 6.787C105.258 6.519 104.626 6.076 102.664 6.076C100.255 6.076 99.923 6.384 99.923 6.716C99.923 7.159 100.684 7.316 103.123 7.577C104.14 7.66 105.775 7.828 106.335 7.896C109.856 8.278 111.427 9.551 111.427 12.025C111.428 14.1 109.983 16.576 103.1 16.576ZM95.111 12.006C95.1611 12.3358 95.2473 12.659 95.368 12.97C96.298 15.059 98.828 16.076 103.1 16.076C106.672 16.076 110.931 15.376 110.931 12.025C110.931 9.832 109.541 8.746 106.282 8.393C105.722 8.325 104.097 8.158 103.082 8.074C100.482 7.792 99.425 7.642 99.425 6.716C99.425 5.758 100.564 5.576 102.666 5.576C104.327 5.5.........完整代码请登录后点击上方下载按钮下载查看