Creating a website header with a sidebar navigation bar is a popular design element that is used to help users navigate a website more easily. This design pattern includes a header section at the top of the page, which typically includes a logo, main navigation links, and a search bar, and a sidebar navigation bar on the left-hand side of the page, which provides additional links to different sections of the site.
To create a website header with a sidebar navigation bar using HTML and CSS, follow these steps:
- Begin by creating a new HTML file and adding the basic HTML structure, including the <html>, <head>, and <body> tags.
- Within the <head> section, add a <title> tag to give your page a title, and include any necessary meta tags.
- In the <body> section, create a <header> element to contain your website header. This will typically include a <div> element with a class of "container" or "wrapper" to help center and organize your header content.
- Within the <header> element, add a <div> with a class of "logo" to include your site's logo. This can be an image or text-based logo, depending on your design preferences.
- Next, create a <nav> element to house your main navigation links. Add <ul> and <li> elements to create a list of links, and use CSS to style the links to match the design of your site. You can also add drop-down menus to provide additional navigation options.
- After your main navigation, add a <div> with a class of "search" to include your search bar. This can be a simple text input field or a more complex search bar with advanced filtering options.
- Create a <div> with a class of "sidebar" to contain your sidebar navigation bar. Within the <div> element, add a <ul> and <li> elements to create a list of links to different sections of your site. You can also use nested lists to create sub-menu options.
- Use CSS to style your website header and sidebar navigation bar. This can include setting background colors, font styles, adjusting the size and positioning of each element, and adding any necessary hover effects to improve usability.
- You can also use JavaScript to add interactivity to your header and navigation bar, such as dropdown menus that expand and collapse when clicked.
- Finally, test your website header with sidebar navigation bar on multiple devices and browsers to ensure that it is responsive and displays correctly on all screen sizes.
In summary, creating a website header with a sidebar navigation bar is a useful design pattern that can improve the user experience of your website. By following these steps and using HTML and CSS to create a clean and functional design, you can create a header that is both visually appealing and easy to use.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<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>header</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<section class="side_navbar" id="navbar">
<center>
<div class="logo">
<div class="img">
<img src="img1.png">
</div>
</div>
<div class="link" id="link">
<a href="#" class="acitv"><ion-icon name="home-outline"></ion-icon>home</a>
<a href="#"><ion-icon name="briefcase-outline"></ion-icon>features</a>
<a href="#"><ion-icon name="layers-outline"></ion-icon>portfilo</a>
<a href="#"><ion-icon name="people-outline"></ion-icon>resume</a>
<a href="#"><ion-icon name="person-outline"></ion-icon>clients</a>
<a href="#"><ion-icon name="cart-outline"></ion-icon>pricing</a>
<a href="#"><ion-icon name="image-outline"></ion-icon>blog</a>
<a href="#"><ion-icon name="chatbubble-outline"></ion-icon>contacts</a>
</div>
<button class="btn">
<ion-icon name="cart-outline"></ion-icon>
<span>0</span>
</button>
<hr class="line">
<div class="icon">
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-linkedin"></ion-icon>
</div>
</center>
</section>
<!-- ===================================================== -->
<section class="home" id="home">
<center>
<div class="home_logo">
<div class="img">
<img src="img2.png" alt="">
</div>
</div>
<h1>Hi, I'm Jone Lee</h1>
<div class="container">
<p>I am a
<span class="typed-text"></span>
<span class="TypeCursor"> </span>
</p>
</div>
<button class="btn1">contant me</button>
<script src="function.js"></script>
</center>
</section>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script>
const TypingText = document.querySelector(".typed-text");
const AutoTyping = document.querySelector(".TypeCursor");
const textArray = ["UI/UX Designer.", "Professionl Coder.", "Developer."];
const typingDelay = 100;
const erasingDelay = 100;
const newTextDelay = 1000;
let textArrayIndex = 0;
let charIndex = 0;
function type() {
if (charIndex < textArray[textArrayIndex].length) {
if (!AutoTyping.classList.contains("typing")) AutoTyping.classList.add("typing");
TypingText.textContent += textArray[textArrayIndex].charAt(charIndex);
charIndex++;
setTimeout(type, typingDelay);
}
else {
AutoTyping.classList.remove("typing");
setTimeout(erase, newTextDelay);
}
}
function erase() {
if (charIndex > 0) {
if (!AutoTyping.classList.contains("typing")) AutoTyping.classList.add("typing");
TypingText.textContent = textArray[textArrayIndex].substring(0, charIndex - 1);
charIndex--;
setTimeout(erase, erasingDelay);
}
else {
AutoTyping.classList.remove("typing");
textArrayIndex++;
if (textArrayIndex >= textArray.length) textArrayIndex = 0;
setTimeout(type, typingDelay + 1100);
}
}
document.addEventListener("DOMContentLoaded", function () {
if (textArray.length) setTimeout(type, newTextDelay + 250);
});
</script>
</body>
</html>
CSS CODE
:root {
--main-color: #212428;
--main-color2: #ea044c;
}
* {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
text-decoration: none;
border: none;
outline: none;
}
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 9rem;
scroll-behavior: smooth;
}
html::-webkit-scrollbar {
width: .8rem;
}
html::-webkit-scrollbar-track {
background: var(--main-color);
}
html::-webkit-scrollbar-thumb {
background: var(--main-color);
border-radius: 4rem;
}
.side_navbar {
width: 20%;
height: 800px;
background: var(--main-color);
display: flex;
align-items: center;
justify-content: left;
padding: 50px 20px 50px 50px;
border-right: 1px solid #3e3c3c;
}
.side_navbar .logo {
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.side_navbar .logo .img {
width: 95%;
height: 95%;
border-radius: 50%;
overflow: hidden;
}
.side_navbar .logo .img img {
width: 100%;
height: 100%;
}
.logo::before {
content: "";
width: 100%;
height: 100%;
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
position: absolute;
top: 0;
left: 0;
z-index: -1;
border-radius: 50%;
animation: rot 5s ease-in-out infinite;
}
@keyframes rot {
50% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
/* ==================== */
.link {
padding: 20px 0;
text-align: left;
}
.link a {
display: block;
padding: 15px 0px;
text-transform: uppercase;
font-size: 18px;
color: #eee;
font-weight: 100;
letter-spacing: 1px;
}
.link .acitv {
color: var(--main-color2);
}
.link a ion-icon {
padding: 0 20px 0 0;
}
.link a:hover {
color: var(--main-color2);
}
/* ============================================= */
.btn {
width: 100%;
height: 50px;
border-radius: 9px;
background: #212428;
box-shadow: 10px 10px 19px #1b1e21,
-10px -10px 19px #272a2f;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
transition: .5s;
transform: translateY(10px);
}
.btn ion-icon {
font-size: 25px;
color: #eee;
}
.btn span {
font-size: 20px;
padding: 2px 5px;
background: var(--main-color2);
border-radius: 50%;
color: #eee;
}
.btn:hover {
transform: translateY(-10px);
cursor: pointer;
}
/* ==================== */
.line {
width: 100%;
border-bottom: 1px solid #3e3c3c;
margin-top: 40px;
}
/* ========================================= */
.icon {
width: 100%;
height: auto;
margin-top: 50px;
}
.icon ion-icon {
font-size: 25px;
padding: 15px;
border-radius: 8px;
background: linear-gradient(145deg, #1e2024, #23272b);
box-shadow: 12px 12px 19px #1c1f22,
-12px -12px 19px #26292e;
margin-right: 10px;
color: #eee;
transition: .5s;
}
.icon ion-icon:hover {
transform: translateY(-10px);
cursor: pointer;
background: linear-gradient(145deg, #23272b, #1e2024);
box-shadow: 12px 12px 19px #1c1f22,
-12px -12px 19px #26292e;
}
/* ==========================================================
=============================================================== */
.home {
width: 80%;
height: 100vh;
position: fixed;
top: 0;
right: 0;
z-index: -1;
background: var(--main-color);
display: flex;
align-items: center;
justify-content: center;
}
.home_logo {
width: 360px;
height: 360px;
border-radius: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 40px 40px 80px #1a1c1f,
-40px -40px 80px #282c31;
}
.home_logo::before {
content: "";
width: 100%;
height: 100%;
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
border-radius: 50%;
animation: rot2 5s ease-in-out infinite;
}
@keyframes rot2 {
50% {
transform: rotate(360deg);
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}
100% {
transform: rotate(360deg);
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
}
.home_logo .img {
width: 93%;
height: 93%;
overflow: hidden;
border-radius: 50%;
}
.home_logo .img img {
width: 100%;
height: 100%;
}
.home h1 {
font-size: 50px;
font-weight: 600;
color: #eee;
z-index: 9999;
padding: 30px 0;
}
.container p {
font-size: 30px;
font-weight: 100;
color: #eee;
}
.typed-text {
color: var(--main-color2);
}
.container p span.TypeCursor {
display: inline-block;
background-color: #ccc;
margin-left: 0.1rem;
width: 3px;
animation: blink 1s infinite;
}
.home .btn1 {
padding: 15px 20px;
border-radius: 5px;
background: linear-gradient(315deg, #1e2024, #23272b);
box-shadow: -7px -7px 15px #1c1f22,
7px 7px 15px #26292e;
color: #eee;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 30px;
transition: .5s;
color: var(--main-color2);
}
Comments
Post a Comment