Justify Horizontal Menu

Developer
Krishna Babu
Size
2,589 Kb
Views
6,072
  1. Justify Horizontal Menu Previews
  2. Justify Horizontal Menu HTML Codes
  3. Justify Horizontal Menu CSS Codes

How do I make an justify horizontal menu?

Plan css based justified horizontal menu, which is compatible with IE8 and all modern browser. . What is a justify horizontal menu? How do you make a justify horizontal menu? This script and codes were developed by Krishna Babu on 11 January 2023, Wednesday.

Justify Horizontal Menu Previews
IQ Test

Justify Horizontal Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Justify Horizontal Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <header> <p>Worked on all modern browers</p> <h1>Justified Horizontal Menu</h1> </header> <ul class="justified-menu"> <li><a href="#" class="active">FAQs</a></li> <li><a href="#">Contact Us by Email</a></li> <li><a href="#">Complaint / Feedback</a></li> <li><a href="#">Phone Support</a></li> <li><a href="#">Visit Your Local Store</a></li> </ul>
</div>
</body>
</html>

Justify Horizontal Menu - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Raleway:400,900);
body { margin: 0; padding: 0; background-color: #000; font-family: 'Raleway', sans-serif; color: #333;
}
.container { float: left; width: 90%; padding: 5%; background-color: #fff;
}
.container header h1 { text-align: center; font-weight: bold; margin-top: 0;
}
.container header p { text-align: center; margin-bottom: 0;
}
.container .justified-menu { width: 100%; text-align: justify; display: inline-block; list-style: none; padding: 0; margin: 0;
}
.container .justified-menu:after { position: relative; display: inline-block; width: 100%; height: 0; line-height: 0; content: '';
}
.container .justified-menu li { display: inline-block;
}
.container .justified-menu li a { text-decoration: none; color: #333; border-bottom: 2px solid transparent; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
.container .justified-menu li a:hover, .container .justified-menu li a.active { border-bottom-color: #0d96b6; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
Justify Horizontal Menu - Script Codes
Justify Horizontal Menu - Script Codes
Home Page Home
Developer Krishna Babu
Username krishnab
Uploaded January 11, 2023
Rating 3
Size 2,589 Kb
Views 6,072
Do you need developer help for Justify Horizontal Menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Krishna Babu (krishnab) Script Codes
Name
CSS3 Timeline
Delhi Metro
Horizontal Scrolling
Fade out slideshow
Javascript Tab
Background
Css3 shapes
Calender
Wipe slider
Upload Button
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!