Shulou(Shulou.com)06/01 Report--

This article "AmazeUI basic navigation bar to achieve the effect of the code to write" most people do not understand, so the editor summarized the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "AmazeUI basic navigation bar to achieve the effect of the code how to write" article.

The details are as follows:

Navigation bar Amaze UI navigation toggle home page item drop-down title 1. Go to the moon 2. Go to Mars 3. Or go back to Earth 4. Go to hell 5. As soon as Qiaotou looks back on other registrations, take a look at the login. Am-topbar .am-text-ir {display: block; margin-right: 10px; height: 50px; width: 125px; background: url (http://a.static.amazeui.org/assets/i/ui/logo.png) no-repeat left center;-webkit-background-size: 125px 24px Background-size: 125px 24px;} Amaze UI. Amaze UI navigation switch home item drop-down take me to the moon or back to earth concubine can not do Amaze UI navigation switch homepage project pull-up take me to the moon or back to earth concubine can not do

Various navigational menus of AmazeUI and their solutions

First, transform the horizontal text menu provided by AmazeUI.

The background color of the text horizontal menu provided by AmazeUI is white, the font is blue, and there is no corresponding class to rewrite the font.

We can add a css to the background and text and rewrite the background and text color

The code is as follows:

Navigation menu-horizontal text / * here is the color of the rewritten text * / .am-menu-default .am-menu-nav a {color:#222;} / * here is the color of the rewritten background * / .am-menu-nav {background:#f1f1f1 } Project 1 Project 1-1 Project 1-2 Project 1-3 Project 1-4 Project 1-5 Project 1-6 Project 2 Project 3 Project 4 Project 5 Project 5-1 Project 5-2 Project 5-3 Project 5-4 Project 5-5 Project 5-6

Second, use the button group and the drop-down button

The idea of solving the Bootstrap navigation bar, "[Bootstrap] navigation bar navbar defects and solutions on IE8" (click on the open link) is used here, but the combination of the AmazeUI button group and the drop-down button is quite weak. There is no button group that combines the drop-down button with the button. At the same time, its rasterized layout can not restrict the size of its drop-down buttons, so you must integrate several div yourself, adjust their width and margin properties, and regulate their size.

The code is as follows:

Navigation menu-drop-down list / * Center the width occupied by each drop-down button * / .am-dropdown {width:30%; text-align:center } Project 1 Project 1-1 Project 1-2 Project 1-3 Project 2 Project 3 Project 3-1 Project 3-2 Project 3-3 Project 3-4 Project 4 Project 5 Project 5-1 Project 5-2 Project 5-3 Project 5-4 Project 6

Here, it is best to put three components in each row, set css to text-align:center, and add a margin-left:-1.5% just to center it, and width:100% occupies one line.

The div beneath it takes up 30% of the width. The width of the next button and drop-down button must be 110%, so that you can just match the original style and match the button with the drop-down button.

Among them, the Li inside means the dividing line.

Third, use the tab of no drop-down items

In fact, there is really no need to use drop-down items for navigation in the mobile phone. The drop-down menu is very difficult on the mobile screen. Set up a navigation directly from the tab. The code is also short, and users will not be dissatisfied. The point is that AmazeUI already provides this layout. Then, you can also assign secondary navigation in this page.

The code is as follows:

Navigation menu-tab layout Project 1 Project 2 Project 3 Project 4 Project 5 Project 6 Project 7

At the same time, AmazeUI also provides another style of tab layout

The code is as follows:

Navigation menu-tab minimalist layout Project 1 Project 2 Project 3 Project 4 Project 5 Project 6

Finally, post the effect picture and code of the entire page:

Navigation menu Navigation menu-horizontal text / * here is the color of the rewritten text * / .am-menu-default .am-menu-nav a {color:#222 } / * here is the color of the rewritten background * / .am-menu-nav {background:#f1f1f1 } Project 1 Project 1-1 Project 1-2 Project 1-3 Project 1-4 Project 1-5 Project 1-6 Project 2 Project 3 Project 4 Project 5 Project 5-1 Project 5-2 Project 5-3 Project 5-4 Project 5-5 Project 5-6 Navigation menu-drop-down list / * Center the width occupied by each drop-down button * / .am-dropdown {width:30% Text-align:center } Project 1 Project 1-1 Project 1-2 Project 1-3 Project 2 Project 3 Project 3-1 Project 3-2 Project 3-3 Project 3-4 Project 4 Project 5 Project 5-1 Project 5-2 Project 5-3 Project 5-4 Project 6 Navigation menu-tab layout Project 1 Item 2 Project 3 Project 4 Project 5 Project 6 Project 7 Navigation menu-tabs Minimalist layout Project 1 Project 2, project 3, project 4, project 5, project 6 and above are the contents of the article entitled "how to write the code to achieve the effect of the AmazeUI basic navigation bar" I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.