Printable View
Hi all,
I am a web page designer.I found that when a page layout for a long while the navigation menu is at the top of the page, usually cause inconvenience on me, thus reducing the site user experience.With the navigation menu can not be allowed to scroll down the page to follow the float it. Now i want to know that how to use javascript to create HTML and CSS. I prefer code. Thanks in advance.
I will give you the step of creating a CSS navigation bar. The navigation bar is divided into three sub-navigation bar.
Code:<div id="floatMenu123">
<ul class="menu123">
<li> <a href="#" onclick="return false;"> Welcome mysite.net </ a> </ li>
</ ul>
<ul class="menu211">
<li> <a href="#" onclick="return false;"> JavaScript </ a> </ li>
<li> <a href="#" onclick="return false;"> CSS </ a> </ li>
<li> <a href="#" onclick="return false;"> XHTML </ a> </ li>
<li> <a href="#" onclick="return false;"> PHP </ a> </ li>
</ ul>
<ul class="menu312">
<li> <a href="#" onclick="return false;"> hi </ a> </ li>
</ ul>
</ div>
You can set the menu CSS effects, where much that it was only used in are set .cssUsed to set up between <ul> Tags padding: 0 and margin: 0.
Code:body (
background-color: # 0021;
height: 1000px;
color: # ccf;
font: 10px verdana, sans-serif;
}
# floatMenu (
position: absolute;
top: 125px;
left: 75%;
margin-left: 230px;
width: 100px;
}
# floatMenu ul (
margin-bottom: 10px;
}
# floatMenu ul 1 (
display pink ;
border: 1px solid # 995;
background-color: # 221;
border-left: 6px solid # 991;
text-decoration: none;
color: # ccq;
padding: 4px 4px 4px 32px;
}
I will give you following tips to use javascript to create HTML and CSS.
# Body inside the height attribute set to 2000px in order to demonstrate this effect, the practical application.
# left set to 50%, that is, the menu is relatively easy to set the location, easy to move.
# Not do in other parts of the CSS code for interpretation, it appears as a modification of art including three sub-level menu menu.
We have been doing the page layout and structure of the menu bar. Naturally, this step we will start to add JQuery code to generate dynamic effects. Where we use the JQuery library and DImensions-based plug-ins. The role of this plug-in is to obtain the client browser to a variety of parameters, such as height, width and scroll bars and the like. Please note that <head> ...</ head> area of the first library outside the chain of the base JS files, and then is the plug-in JS file. Second, note that the path to ensure proper storage.
Code:<script language="javascript" src="jquery_mini123.js"> </ script>
<script language="javascript" src="jquery.dimensions123.js"> </ script>
You can start to add our JavaScript statement, the first <head> to add a JavaScript tab, and then add the following statement:
Ready () in the function and window.onload () is similar, but there are different, can be said that an improved version. window.onload () is the entire page download has finished (DOM and the various elements) when triggered, while the (document). ready () is only triggered after the DOM is loaded. Advantages are obvious. Check and reply.Code:<script language="javascript">
(document). ready (function () (
});
</ script>