HTML 및 CSS 사이드바 메뉴 사용
28586 단어 webdevcssjavascripthtml
기본 HTML CSS 및 JavaScript 프로그래밍 코드를 사용하여 멋진 측면 메뉴를 만들 수 있습니다.나는 이미 더 많은 유형의 사이드바 메뉴를 설계했다.만약 네가 원한다면, 너는 이 교과서에 따라 할 수 있다.
✅ 현장 미리보기 보기 보기👉👉 Sidebar Menu Using HTML CSS
이것은 설정 파일 이미지와 기본 텍스트가 있는 매우 간단한 사이드 메뉴 표시줄입니다.다음은 제가 여기에 8개의 메뉴를 추가했습니다.나는 모든 메뉴에 아이콘을 추가했고 메뉴 항목에 정지 효과를 추가했다.
이 메뉴 항목을 클릭하거나 마우스를 움직일 때, 이 메뉴의 배경이 바뀝니다.
일반적으로 메뉴 표시줄은 완전히 보이지만, 단추를 누르면 메뉴 표시줄을 숨깁니다.여기에서 내비게이션 표시줄을 만들었지만, 이 경우 메뉴 항목을 추가하지 않았습니다.필요하면 이 공간에 메뉴 항목을 추가할 수 있습니다.
첫 번째 단계: 기본적인 html 구조를 만들어서 사이드바를 만든다
이 파일을 만들려면 HTML 및 CSS 파일을 만들어야 합니다.다음 구조를 복사하여 HTML 파일에 붙여넣습니다.아래 HTML 구조에서 필요한 코드를 추가할 위치에 모든 정보를 배치했습니다.본 강좌에 따라 조작하고 아래 정보에 따라 코드를 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div class="wrapper">
<!--Top menu -->
<div class="sidebar">
<!--profile image & text-->
<!--menu item-->
</div>
</div>
<script>
</script>
</body>
</html>
2단계: css 코드로 배경 디자인
이런 것들이 있어서 저는 기본적인 CSS 코드를 추가했고 기본적으로 배경을 디자인했고 사이드바에 모양을 주었습니다.이 예에서 나는 배경에 파란색을 사용했다.만약 네가 원한다면, 너는 이 색깔을 바꿀 수 있다.
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
*{
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body{
background: #f5f6fa;
}
.wrapper .sidebar{
background: rgb(5, 68, 104);
position: fixed;
top: 0;
left: 0;
width: 225px;
height: 100%;
padding: 20px 0;
transition: all 0.5s ease;
}
3단계: 프로필 이미지 및 제목 추가
위에서 보여준 바와 같이, 우선 나는 개인 자료 사진, 제목, 그리고 설명을 사용했다.나는 그것을 실현하기 위해 아래의 HTML과 CSS 프로그래밍 코드를 사용했다.
이 경우 원하는 대로 프로파일 이미지를 변경하고 필요에 따라 이미지 크기를 늘리거나 줄일 수 있습니다.이 예에서 나는
height 100px와 width 100px를 사용했다.여기에서 나는
border-radius 50% 개인 자료 이미지를 사용했는데, 이것은 이 그림을 완전히 둥글게 보였다.정사각형이나 다른 크기를 유지하려면 이 비율을 변경할 수 있습니다. <div class="profile">
<img src="https://1.bp.blogspot.com/-vhmWFWO2r8U/YLjr2A57toI/AAAAAAAACO4/0GBonlEZPmAiQW4uvkCTm5LvlJVd_-l_wCNcBGAsYHQ/s16000/team-1-2.jpg" alt="profile_picture">
<h3>Anamika Roy</h3>
<p>Designer</p>
</div>
.wrapper .sidebar .profile{
margin-bottom: 30px;
text-align: center;
}
.wrapper .sidebar .profile img{
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
.wrapper .sidebar .profile h3{
color: #ffffff;
margin: 10px 0 5px;
}
.wrapper .sidebar .profile p{
color: rgb(206, 240, 253);
font-size: 14px;
}
4단계: 사이드바에 메뉴 항목 추가
이 예에서 나는 사용했다
eight menu items.나는 메뉴마다 아이콘을 사용해서 메뉴 항목을 더욱 아름답고 매력적으로 만들었다.필요에 따라 이 아이콘과 메뉴 항목을 변경할 수 있습니다.<ul>
<li>
<a href="#" class="active">
<span class="icon"><i class="fas fa-home"></i></span>
<span class="item">Home</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fas fa-desktop"></i></span>
<span class="item">My Dashboard</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fas fa-user-friends"></i></span>
<span class="item">People</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fas fa-tachometer-alt"></i></span>
<span class="item">Perfomance</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fas fa-database"></i></span>
<span class="item">Development</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fas fa-chart-line"></i></span>
<span class="item">Reports</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fas fa-user-shield"></i></span>
<span class="item">Admin</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fas fa-cog"></i></span>
<span class="item">Settings</span>
</a>
</li>
</ul>
</div>
5단계: css 코드를 사용하여 메뉴 항목 설계
다음 코드는 처음에 디자인 및 위에 추가된 메뉴 항목에 색상을 추가하는 데 사용된 CSS 프로그래밍 코드입니다.
이 예에서 나는 아이콘과 텍스트 사이에 흰색을 사용했는데, 파란색 배경에서 보면 더욱 재미있어 보인다.아래에서 보실 수 있습니다. 제가 정지 효과를 추가했습니다.마우스를 해당 메뉴에 놓거나 클릭하면 위 프레젠테이션에서 보듯이 배경이 변경됩니다.
.wrapper .sidebar ul li a{
display: block;
padding: 13px 30px;
border-bottom: 1px solid #10558d;
color: rgb(241, 237, 237);
font-size: 16px;
position: relative;
}
.wrapper .sidebar ul li a .icon{
color: #dee4ec;
width: 30px;
display: inline-block;
}
.wrapper .sidebar ul li a:hover,
.wrapper .sidebar ul li a.active{
color: #0c7db1;
background:white;
border-right: 2px solid rgb(5, 68, 104);
}
.wrapper .sidebar ul li a:hover .icon,
.wrapper .sidebar ul li a.active .icon{
color: #0c7db1;
}
.wrapper .sidebar ul li a:hover:before,
.wrapper .sidebar ul li a.active:before{
display: block;
}
6단계: 탐색 모음 만들기
이 예에서 나는 navigation bar를 사용했지만 내비게이션 표시줄의 어떤 링크도 사용하지 않았다.이 예에서, 나는 메뉴 단추를 추가했다. 이 단추를 누르면 전체 메뉴를 숨기고, 다시 누르면 메뉴를 표시한다.다음 HTML 및 CSS 프로그래밍 코드는 이 메뉴 막대를 만들고 디자인하는 데 이미 사용되었습니다.
<div class="section">
<div class="top_navbar">
<div class="hamburger">
<a href="#">
<i class="fas fa-bars"></i>
</a>
</div>
</div>
</div>
.wrapper .section{
width: calc(100% - 225px);
margin-left: 225px;
transition: all 0.5s ease;
}
.wrapper .section .top_navbar{
background: rgb(7, 105, 185);
height: 50px;
display: flex;
align-items: center;
padding: 0 30px;
}
.wrapper .section .top_navbar .hamburger a{
font-size: 28px;
color: #f4fbff;
}
.wrapper .section .top_navbar .hamburger a:hover{
color: #a2ecff;
}
다음은 메뉴 단추를 눌렀을 때 옆면
move 225 to the left이 완전히 숨겨진다는 뜻이다.
body.active .wrapper .sidebar{
left: -225px;
}
body.active .wrapper .section{
margin-left: 0;
width: 100%;
}
7단계: 메뉴 버튼을 활성화하기 위해 JavaScript 코드 추가
이 예에서, 나는 아주 적은 양의 자바스크립트 코드를 사용했는데, 처음에는 navigation menu bar 의 메뉴 단추를 활성화하는 데 사용되었다.위의 설명을 보시면 제가 메뉴 단추를 만들었다는 것을 알 수 있습니다. 이 단추를 누르면 모든 메뉴 표시줄이 숨겨집니다.
현재 우리는 이 단추를 활성화할 것입니다. 이것은 이 단추를 눌렀을 때 위에 추가된 css 코드가 유효하다는 것을 의미합니다.다음 JavaScript 프로그래밍 코드를 사용하여 구현했습니다.아래의 JavaScript 프로그래밍 코드는 매우 간단합니다.
var hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", function(){
document.querySelector("body").classList.toggle("active");
})
관련 게시물:
live demo
JavaScript Random Password Generator
Automatic Image Slider in Html CSS
Sidebar Menu Using HTML CSS
Reference
이 문제에 관하여(HTML 및 CSS 사이드바 메뉴 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/code_mystery/sidebar-menu-using-html-and-css-o49텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
