Home > Developer > Web Develop
As a Web site dedicated to reading, its navigation must be global, fixed, but also concise. In fact, several reading website watercress reading, read more, Jane Books are done, just realize it is not complicated, the following is the way I think of the implementation.
The first is the structure of the HTML:
1 <Body>2 <nav>3 <Div>4 <ahref="#">Point</a>5 <ahref="#">Drop</a>6 <ahref="#">One</a>7 <ahref="#">Health</a>8 </Div>9 </nav>Ten <Body>
Then there is the CSS style:
1 <style>2 Body{3 margin:0;/*A certain initialization is necessary.*/4}5 nav{6 position:fixed;/*because it is a full-page vertical navigation, it must be set to fixed positioning*/7 /*at the same time, because fixed positioning is to take the label out of the document directly, so the layout of the other elements to use margin to leave margins,8 if necessary, you can set the navigation bar to a fixed width to ensure that no white edges appear*/9 Background-color:#2f2f2f;Ten Height:100%;/*make the navigation bar as high as the page*/ One Top:0; Left:0;/*these two properties only work when fixed positioning is set*/ A} - nav a{/*set the Display property of each a tag to block, which makes it easy to control the style of each a tag*/ - Font-weight:Bold; the font-size:18px; - Color:#ffffff; - Display:Block; - padding:15px; + text-decoration:None; -} + nav Div a:first-child{/*using pseudo-classes to control the style of the a tag of the active page, each page as a static page has to write a different CSS control style, A so you can use class to control the style if it's inconvenient.*/ at Box-shadow:-1px 0.5px 4px 1px #777 inset; - Background-color:#e58c7c; -} - nav Div a:hover{ - Background-color:#e58c7c; -} in nav Div a:active{ - Box-shadow:-1px 0.5px 4px 1px #777 inset; to Background-color:#e58c7c; +} - </style>
This effect is achieved after:
How to implement vertical navigation/vertical navigation similar to simple books with CSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
