Banner navigation

Developer
EOS
Size
1,975 Kb
Views
6,072
  1. Banner navigation Previews
  2. Banner navigation HTML Codes
  3. Banner navigation CSS Codes

How do I make an banner navigation?

What is a banner navigation? How do you make a banner navigation? This script and codes were developed by EOS on 10 January 2023, Tuesday.

Banner navigation Previews
IQ Test

Banner navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>banner navigation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="navigation_container">
<!-- the left side of the fork effect --> <div class="l-triangle-top"></div> <div class="l-triangle-bottom"></div>
<!-- the ribbon body --> <div class="rectangle">
<!-- the navigation links --> <ul id="navigation"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Blog</a></li> </ul>
<!-- end the ribbon body --> </div>
<!-- the right side of the fork effect --> <div class="r-triangle-top"></div> <div class="r-triangle-bottom"></div>
<!-- end container -->
</div>
</body>
</html>

Banner navigation - Script Codes CSS Codes

body { background:rosybrown;
}
#navigation li { list-style: none; display: block; float: left; margin: 1em;
}
#navigation li a { text-shadow: 0 2px 1px rgba(255,255,255,0.5); display: block; text-decoration: none; color: peachpuff; font-size: 1.6em; margin: 0 .5em; text-transform:uppercase; font-family:Arial;
}
#navigation li a:hover { margin-top: 2px;
}
#navigation_container { margin: 0 auto; width: 960px;
}
.rectangle { background: tan; height: 62px; position: relative; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55); box-shadow: 0px 0px 4px rgba(0,0,0,0.55); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 500; /* the stack order: foreground */ margin: 3em 0;
}
.l-triangle-top { border-color: tan transparent transparent; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: left; top: 1px; left: -50px;
}
.l-triangle-bottom { border-color: transparent transparent tan; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: left; top: -40px; left: -150px;
}
.r-triangle-top { border-color: tan transparent transparent; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: right; right: -45px; top: -107px;
}
.r-triangle-bottom { border-color: transparent transparent tan; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: right; top: -149px; right: -145px;
}
Banner navigation - Script Codes
Banner navigation - Script Codes
Home Page Home
Developer EOS
Username aurumlux
Uploaded January 10, 2023
Rating 3
Size 1,975 Kb
Views 6,072
Do you need developer help for Banner navigation?

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!

EOS (aurumlux) Script Codes
Name
FLOWER HOVER
Background scroll
ZIRKUS
HEXAGON
Go top
A Pen by EOS
Css hover
Custom
Css Triangles
CROSS HOVER
Create amazing blog posts 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!