Skip to main content

Navbar Design With Slider Using Html Css Only

by Rustcode
navbar-design-with-slider-using-html-css-only

Navbar Design With Slider Using Html Css Only

Creating an eye-catching and interactive website navigation bar (navbar) is essential in web development. When you add a slider to it, your website becomes even more engaging. In this tutorial, we'll explore how to design a stunning navbar with an integrated slider using only HTML and CSS. We'll take you through the process step by step, making it easy for you to create an appealing navigation system for your website.

The best part is, you won't need complex JavaScript or other programming languages. Whether you're a beginner or an experienced web designer. With the power of HTML and CSS, you can create a dynamic navbar that not only looks great but also enhances user engagement. This tutorial will equip you with the skills to make your website's navigation highly functional. It's a great way to level up your website's design without delving into complicated coding.


Table Of Contents

Read Also:

HTML:

Let's begin with the foundational structure of an HTML document, as depicted below.

<!DOCTYPE html>
<html>
 <head>
   <title>Navbar Design With Slider Using Html Css Only</title>
 </head>
 <body>
	// Content
 </body>
</html>


You can incorporate all the required links and dependencies into the HTML document using the code snippet provided below. 

	<link href="https://fonts.googleapis.com/css?family=Montserrat:500,700,900|Work+Sans:300" rel="stylesheet">


Now that we have established the basic HTML structure and ensured that all necessary dependencies are included in the HTML document, it is time to proceed with writing the HTML code, which is provided below. 

<!DOCTYPE html>
<html>
<head>
	<title>Navbar Design With Slider Using Html Css Only | Rustcode</title>
	<link href="https://fonts.googleapis.com/css?family=Montserrat:500,700,900|Work+Sans:300" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
	<div class="tabs">
		<input type="radio" id="radio-1" name="tabs" checked />
		<label for="radio-1" class="tab">Home <span class="badge">4</span></label>
		<input type="radio" id="radio-2" name="tabs"/>
		<label for="radio-2" class="tab">Products</label>
		<input type="radio" id="radio-3" name="tabs"/>
		<label for="radio-3" class="tab">Blog</label>
		<input type="radio" id="radio-4" name="tabs"/>
		<label for="radio-4" class="tab">About</label>
		<span class="slider"></span>
	</div>
</div>

</body>
</html>

  • <html>: The opening tag for the HTML document.

  • <head>: This section contains metadata, including the title of the webpage and links to external resources (fonts and a CSS file).

  • <title>: Sets the title of the webpage displayed in the browser tab.

  • <link>: Links to external resources, including fonts from Google Fonts and a CSS file ("style.css") for styling.

  • <body>: The main content of the webpage starts here.

  • <div class="container">: A container for the navigation bar.

  • <div class="tabs">: A section for the tabs within the navigation bar.

  • <input>: Radio buttons (hidden) are used as a mechanism to switch between tabs.

  • <label>: Labels for the tabs, which users can click to navigate.

  • <span class="badge">: Small badges next to some tabs to display additional information (e.g., a number).

  • <span class="slider">: A slider element to highlight the active tab.

Output:

html-code-output

Read Also:

CSS:

*{
  margin: 0px;
  padding: 0px;
}

body{
  font-family: "Montserrat", sans-serif;
  background: #E5E5E5;
}

.container{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tabs{
  display: flex;
  position: relative;
  background: white;
  padding: 16px;
  border-radius: 80px;
  box-shadow: 0 6px 12px 0 rgba(24, 94, 224, 0.15);
}

.tabs *{
  z-index: 4;
}

input[type=radio]{
  display: none;
}

.tab{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  width: 200px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 80px;
  cursor: pointer;
  transition: color 0.15s ease-in;
}

.badge{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-left: 14px;
  border-radius: 50%;
  background: #B7F397;
}

input[type=radio]:checked + label{
  color: #042100;
}

input[type=radio]:checked + label > .badge{
  background: #042100;
  color: white;
}

input[id=radio-1]:checked ~ .slider{
  transform: translateX(0);
}

input[id=radio-2]:checked ~ .slider{
  transform: translateX(100%);
}

input[id=radio-3]:checked ~ .slider{
  transform: translateX(200%);
}

input[id=radio-4]:checked ~ .slider{
  transform: translateX(300%);
}

.slider{
  position: absolute;
  display: flex;
  height: 56px;
  width: 200px;
  background: #B7F397;
  z-index: 1;
  border-radius: 80px;
  transition: 0.25s ease-out;
}

@media (max-width: 760px) {
  .tabs{
    transform: scale(0.6);
  }
}

  • It sets default margin and padding for all elements and specifies the font for the entire webpage.

  • The navigation bar is contained within a flexbox with centered alignment.

  • The tabs are styled with a white background, padding, border-radius, and a shadow for a card-like appearance.

  • Radio buttons and labels are used to control the tab switching. When a radio button is checked, the corresponding tab label and slider change appearance.

  • Each tab label includes a badge for additional information, and when a tab is selected, its color and badge colors change.

  • The slider highlights the active tab and moves horizontally with a smooth transition.

  • There's a media query for smaller screens, scaling down the tabs to improve responsiveness.

Output:

Read Also:

Output:

navbar-design-with-slider-using-html-css-only

Read Also:

Youtube Video:

We also made a youtube video for "Navbar Design With Slider Using Html Css Only", if you want to watch demo you can click on below video.

Read Also:


Comments

Post a Comment