CSS navigation to achieve fixed, left and right sliding scroll bar production method

Time:2021-3-1

For the above navigation effect, the navigation is fixed at the top. You can slide left and right and click more options.

This kind of production is quite simple. This paper just points out a few points

Fixed position

The menu is fixed at the top and can be used position:fixed; top:0; left:0; . At the same time, we should pay attention to:

  • The following list moves down the corresponding position, otherwise when you open the page, part of the list below will be covered.
  • Set the background for the menu. Otherwise, if it is transparent, the contents scrolled up with the list below will overlap.
  • Set the background for the body, because wechat browser has a background color (not white) by default, which may conflict with our effect. Set the background as needed.

Using table

Usually we use UL and Li as float, but when one line cannot be displayed, it is troublesome to keep it from falling to the second line, so we recommend table.

The following is the whole CSS code, where. Wrapper is the outer layer, and. NAV and. List are brothers.


body, .wrapper 
{ 
background:#fff; 
}

.nav 
{ 
position:fixed; 
top:0;
 left:0; padding:0; 
width:100%; 
height:60px; 
overflow-x:scroll; 
background:#fff; 
}
.nav table 
{ 
width:720px;
 border-collapse:collapse;
 }
.nav table td 
{
 padding-top:10px; 
padding-bottom:10px; 
width:80px; 
text-align:center; 
}
.nav table td a 
{ 
line-height:40px; 
font-size:14px; 
font-weight:bold; 
}
.nav table td.cur a 
{ 
box-sizing:border-box; 
border-bottom:2px solid #f07515; color:#f07515; 
}

.list 
{ 
margin-top:60px; 
}

Dynamic limited width

The above CSS code sets 720px for the table, which is the width of 9 TD. Generally, the number of menus is fixed, so we can set it directly. But if it is not fixed, we can use the program to set it dynamically, such as JavaScript setting method:


$(".header table").width($(".header table td").length * $(".header table td").width());

When the following menu item is selected, the following menu item is displayed

For non Ajax pages, when you click the following menu page, the page refreshes and the leftmost menu items are displayed. We can use JavaScript to scroll the menu items to display the currently selected items. The example code is as follows:

var count = 0;
$(".header table td").each(function () {
	if ($(this).hasClass("cur")) {
		return false;
	}
	count++;
});
If (count > = 3) {// don't scroll when the previous ones are selected
	Count - = 2; // you don't have to scroll to the far left
	$(".header").get(0).scrollLeft = count * $(".header table td").width();
}

summary

This article about CSS navigation fixed, left and right sliding scroll bar production method is introduced here, more relevant CSS navigation fixed left and right sliding scroll bar content, please search the previous article of developer or continue to browse the following related articles, hope you can support developer in the future!