Blog link: https://blog.51cto.com/13969817
From personal preference, I prefer the style of SharePoint Olso, the navigation bar at the top, but if I increase the number of new pages can be displayed if the navigation drop-down menu, perfect. So how do I improve this experience?
Ideally, I would like to drop-down menu for each menu item in a row, we look at navigation with drop-down menu, you can see there is a class: dynamic, double-click and copy it, then in the right style label next add a rule, we can set the width to a specific pixel width or the width can be set to auto, so that it can automatically set the size of the screen, I think we need to be added important as this is an important rule, In addition, we do not need to wrap.
Rule added at Style tag, sample code:
.dynamic {
width:! Auto Important;
White Space-: Important nowrap;!
}
We look at the effect, expand the navigation drop-down menu, you can see the links in the text displayed on a single line, well, if you want to permanently retained, you need to copy this rule, and then paste it into the style sheet, save We will use this rule permanent
? If there are multiple links us Navigation drop-down menu, if we want to add some space between the sub-menu items yet
we continue to add dynamic class in a rule:
Rule added at Style tag, sample code:
.dynamic Li {
padding:! Important 5px;
border-Top: Solid lightgrey Important 2px;!
}
We look at the effect, expand the navigation drop-down menus, links are displayed in a frame in the form of good results.
In order to permanently preserve these changes, we do in the stylesheet the appropriate changes, and save it:
