I will return to share the source code (source code) of one of the free templates that have been made, namely Textrim. This time what will be discussed is about the top navigation menu. This menu is quite attention-grabbing as well as raises a lot of questions from users because of its unusual shape. So called because of the shape that pushes to the side and to see all the menus you have to scroll horizontally.
Even though the horizontal scroll menu has been used by various large sites both from Indonesia and abroad. However, the number is not as much as regular navigation (mostly in the form of dropdown menus ) so it still looks "weird" to some people. I myself made this side scroll menu inspired by the Kaskus website. So it is actually commonplace and natural, it just needs to be further socialized to visitors.
To people who have completely never seen side-scrolling navigation, the menus will appear truncated. But it is not. It just needs to be scrolled right and left.
How to Create a Textrim Horizontal Scroll Menu
To create a side scroll navigation like Textrim , all it takes is creativity in scrolling through the CSS code. You don't need any Javascript. And what I share is the basic code. It may not match the template being used because it conflicts with the template's built-in CSS code. If there is a discrepancy with the demo, please review it and change it yourself.
First, save the following HTML code where the menu will appear. Usually it's in the header. Just edit the link and title contained in it.
<!-- Navigation Menu Horizontal Scroll by igniel.com -->
<div class="ignielHorizontal">
<ul>
<li><a href="#" title="Download">Download</a></a></li>
<li><a href="#" title="Tutorial">Tutorial</a></li>
<li><a href="#" title="Video">Video</a></li>
<li><a href="#" title="Subscribe">Subscribe</a></li>
<li><a href="#" title="HTML5">HTML5</a></li>
<li><a href="#" title="CSS3">CSS3</a></li>
<li><a href="#" title="Javascript">Javascript</a></li>
<li><a href="#" title="Make Money Online">Make Money Online</a></li>
<li><a href="#" title="Study Case">Study Case</a></li>
</ul>
</div>Second, save the following CSS code so that the menu can scroll sideways smoothly.
/* Navigation Menu Horizontal Scroll by igniel.com */
.ignielHorizontal ul {
background-color: #673ab7; /* Warna background menu */
max-width: 100%; /* Lebar maksimal menu */
overflow-x: auto;
}
.ignielHorizontal {
color: #fff;
line-height: 0px;
overflow: hidden;
}
.ignielHorizontal a {
font-size: 14px;
color: #fff;
text-decoration: none;
padding: 10px 13px;
line-height: 1.5em;
display: block;
}
.ignielHorizontal a:hover {
background-color: rgba(0,0,0,.25);
color: #fff;
text-decoration: none;
}
.ignielHorizontal ul, .ignielHorizontal li {
list-style: none;
display: inline-block;
white-space: nowrap;
margin: 0px;
padding: 0px;
}
@media screen and (max-width: 480px){
.ignielHorizontal a {
font-size: 13px;
padding: 8px 11px;
}
}
@media screen and (max-width: 360px){
.ignielHorizontal a {
font-size: 12px;
padding: 7px 10px;
}
}PLEASE NOTE! Marked100%is the maximum width of the menu whose sum will follow the width of the parent. In this example, I created a page with the maximum width of the body600px, then the maximum menu width will be the same, which is 600px.
An overflow effect that allows the menu to be shifted sideways will only appear if the total number of links on the menu results in a width of more than 600px. If it's less than that, the menu will look normal without being able to move it around. So if later the scroll effect doesn't appear, first check the max-width value of the header or other parent where this menu is stored.
The result will be as follows. Please remember, this is just basic code. Make changes according to the template if it doesn't match the demo. Don't be afraid to juggle.
Okay, finished, a simple article about the tutorial to create a side scroll navigation menu in the style of Textrim Blogger Theme. Share your experience using the code above in the comments column.