Last night the navigation bar barely be done, although trying to do look similar, but with the official website is still a big gap, some places do not understand the meaning of the source code, can only keep telling myself, anyway more than one way to achieve this function, can not learn it I went to look for other ways to chant, fortunately, so far no big problem. It almost seems limited, some features CSS can not seem to realize, on the first matter, so I HTML + CSS do a good job, and then wondering how it should add JS. Late last night, no energy to write a summary, and do make up navigation when some of the ideas and do not be out of place today to prevent a long time to forget.
This is a first and most top black navigation bar:
Frame substantially as follows:
topbar-box thinking as follows:
- topbar: maximum div, two-part top navigation topbar-box and header-bar. Main control the font (font-size, color), the background color (background), the position (position: relative)
- topbar-box: the second largest div, contains content. The main navigation controls the size (width, height), position (margin-left, margin-right), centered allowed topbar-box a: this pattern is provided inside a div tag, including removing the underscore (text-decoration), color (Color), vertically centered (line-height), display (the display)
- left-message-bar: div put inside the content into two parts, put the left navigation. Navigation to do with a label. Small vertical line in the middle of the navigation span is + | production. Then set the style: the left and right margins (margin), color (color)
- right-login-bar: put the right part of the login, registration and message notification login information. Primary installation position (position), the height (height) and a floating manner (float)
- shoppingcart: which also includes a div to put the cart icon and text. Official website with a shopping cart icon seems to be something svg like to do. I want to use the picture, but the format is always the problem, do not do it first. Just write a text. Several major set style: position (position), display mode (display), the height (height), the center (line-height, text-align), color (color), the background color (background), Padding (padding )
Then I called the header portion of the navigation bar (always feel this title is unlikely to want to pay attention .. There is no better way to refer to this section):
Frame substantially as follows:
bar header-bar think about the following:
- header-bar: topbar-box and tied for the second-largest div, that contains content. The main control navigation bar position (position), height (height), the background color (background).
- headerbar-inner: really put part of. The main set size (width, height), centered about margins (margin-left, margin-right), the background color (background).
- header-logo: logo official website also seemed to myself, now I can not do it screenshots, with a picture as logo, hover when the picture will change, I also cut another one. Time to see with CSS or JS can be achieved with this function. Style settings: floating manner (float), a width (width), the margins (margin-top)
- middle-bar: middle of the navigation information. Is set in a floating manner (a float), a width (width), middle (line-height, text-align), margins (margin) middle-bar a: set a tab style, clear underscore (text-decoration), font ( font-size, color), the left and right margins (margin)
- search-bar: the right of the search bar, related to the form data, use the form tag related content wrap. It includes a search box (search), Button (submit), popular search terms (search-hot-words) input id = "search-text" type = "search": search box, set the location (position), size (width, height), border (border), left border right border and the buttons search box overlap, deleted a search box edge (border-right), to eliminate the frame line (outline), displays the degree of (z-index), the padding (padding), animation (Transition)
-
input class = "search-btn" type = "submit": Search button, set position (position), displays the degree of (z-index), the size (width, height), to eliminate the border line (Outline), the border (border) background color (background-color), animation (transition)
-
search-hot-words: embedded in popular search terms in the search box. Set position (position, right), displays the degree of (z-index), the padding (padding), vertically centered (line-height)
-
search-hot-words a: set up a label style, remove the underscore (text-decoration), left and right margins (margin), the color of the font size (font-size, color), the background color (background-color)
-
search-text: focus, search-btn: focus: change the border color when clicked. Set the border style (border)
Finally fixed on the right side of the window Windows Sidebar:
Frame substantially as follows:
tool-bar think about the following:
- tool-bar: contains the entire contents of the largest border. Set position (position, right, bottom), the background color (background) tool-bar a: Content tool-bar are all packed with a tag element for each group. Provided clear underlined (text-decoration), display mode (display), the center (text-align), color size (height, width, color), the position (border-bottom), the border (border)
- icon: icon has mouseover color change effect, the official website using a swap two pictures. Another way to find online can be, and just use a colored picture. Filter through filter setting gradation value attribute. Filter preset gradation value is 100%, so that gray is displayed, and then set the pseudo-class: hover the gray value filter removed, thus forming a picture change illusion, it did not change color. I acknowledge that this after not quite understand why the official website to use two pictures swap, but later found the official website there is a small detail, it is in the region, images and text at the same time change color. And I set: hover can do to change the images and text separately. So this may be the reason two pictures with interchangeable, when the late accomplish this with js, may need to use the second picture.
opacity: this property with transparency before and after the mouse hover, to look better
: Hover: hover pseudo-class. Toolbar mouse through the official website of time will become slightly larger. This is by: hover increase the 1px of width and height achieved after the results.
Be finished part:
- Shopping cart icon, hover color and drop-down list
- Hover logo change, a navigation display hover drop-down list box focus search results appear popular search terms drop-down list, popular search terms in the search text disappears when the focus
- Sidebar mouseover text and images while changing the color (while changing the hover effect within the region)