Hierarchical Tree Structure in HTML CSS

Hierarchical Tree Structure In HTML CSS
Code Snippet:Menu parent children as a diagram...
Author: Joël Lesenne
Published: January 18, 2024
Last Updated: January 22, 2024
Downloads: 2,036
License: MIT
Edit Code online: View on CodePen
Read More

This code creates a hierarchical tree structure in HTML/CSS. It organizes links in nested levels. It helps to visualize navigation with expandable sections. The CSS stylizes the tree for a clean, organized look.

This code is handy for website navigation menus. It organizes links hierarchically, aiding user exploration. Its collapsible structure saves space, improving page organization.

How to Create Hierarchical Tree Structure In Html Css

1. First of all, load the Google Fonts CSS by adding the following CDN links into the head tag of your HTML document. (Optional)

<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://codepen.io/joellesenne/pen/pdMPdW.css'>

2. In your HTML file, create a structure using nested <ul> and <li> elements. Each <li> represents a navigation item, and nested <ul> elements indicate sub-levels.

<h1>Hierarchical Tree Structure</h1>
<nav class="nav">
			<ul>
				<li>
					<a href="#">Home</a>
					<ul>
						<li>
							<a href="#">Lab</a>
							<ul>
								<li>
									<a href="#">Code</a>
									<ul>
										<li>
											<a href="#">Html</a>
											<ul>
												<li>
													<a href="#">Css</a>
													<ul>
														<li>
															<a href="#">Jquery</a>
														</li>
													</ul>
												</li>
											</ul>
										</li>
									</ul>
								</li>
								<li>
									<a href="#">Graph</a>
									<ul>
										<li>
											<a href="#">Image</a>
											<ul>
												<li>
													<a href="#">Design</a>
												</li>
											</ul>
										</li>
									</ul>
								</li>
							</ul>
						</li>
						<li>
							<a href="#">Blog</a>
							<ul>
								<li>
									<a href="#">Category</a>
									<ul>
										<li>
											<a href="#">Code</a>
										</li>
										<li>
											<a href="#">Graph</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
						<li>
							<a href="#">About</a>
							<ul>
								<li>
									<a href="#">Vcard</a>
									
								</li>
								<li>
									<a href="#">Map</a>
								</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</nav>

3. After that, use the following CSS or customize it to suit your design preferences. The CSS styles the navigation elements, providing the collapsible tree structure and visual presentation.

The CSS classes like .nav, .nav ul, and .nav li target specific elements to create the hierarchical structure. Adjust these classes to modify the appearance or layout of your navigation.

*,
*:before,
*:after {
  box-sizing: border-box !important;
}

* {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0 none;
  transition: all ease .4s;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: 'Fjalla One', sans-serif;
  font-size: 18px;
  background: RGBA(0, 58, 97, 1)
}

h1 {
  padding-top: 40px;
    
  color: #ccc;
  text-align: center;
  font-size: 1.8rem;
     
    text-shadow: rgba(0,0,0,0.6) 1px 0, rgba(0,0,0,0.6) 1px 0, rgba(0,0,0,0.6) 0 1px, rgba(0,0,0,0.6) 0 1px;
}

.nav {
  margin: 20px auto;
  width: 455px;
  min-height: auto;
}

.nav ul {
  position: relative;
  padding-top: 20px; 
}

.nav li {
  position: relative;
  padding: 20px 3px 0 3px; 
  float: left; 
  
  text-align: center;
  list-style-type: none; 
}

.nav li::before, .nav li::after{
  content: '';
  position: absolute; 
  top: 0; 
  right: 50%;
  width: 50%; 
  height: 20px;
  border-top: 1px solid #ccc;
}

.nav li::after{
  left: 50%;
  right: auto; 
  
  border-left: 1px solid #ccc;
}

.nav li:only-child::after, .nav li:only-child::before {
  content: '';
  display: none;
}

.nav li:only-child{ padding-top: 0;}
.nav li:first-child::before, .nav li:last-child::after{
  border: 0 none;
}

.nav li:last-child::before{
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
}

.nav li:first-child::after{
    border-radius: 5px 0 0 0;
}
.nav ul ul::before{
  content: '';
  position: absolute; top: 0; left: 50%;
  border-left: 1px solid #ccc;
  width: 0; 
  height: 20px;
}

.nav li a{
  display: inline-block;
  padding: 5px 10px;
  
  border-radius: 5px;
  border: 1px solid #ccc;
  
  text-decoration: none;
  text-transform: uppercase;
  color: #ccc;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
}

.nav li a:hover, .nav li a:hover+ul li a {
  color: #000;
  background: #c8e4f8;   
  border: 1px solid #94a0b4;
}

.nav li a:hover+ul li::after, 
.nav li a:hover+ul li::before, 
.nav li a:hover+ul::before, 
.nav li a:hover+ul ul::before{
  content: '';
  border-color: #94a0b4;
}

You can expand the navigation by adding more <li> elements or nesting additional <ul> elements as needed. Customize the text, links, and styling to match your website’s content and design

That’s all! hopefully, you have successfully created a Hierarchical Tree Structure nav on your website. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X