Jump to content
Stef's Coding Community
prateek091

How To Import Java Script Navigation Bar To Html Css

Recommended Posts

Hey guys can any one tell me how to put java script of navigation bar into HTML CSS please I can't find any tutorial for beginner for that... Thnxxx in advance

Share this post


Link to post
Share on other sites

What do you mean by 'JavaScript of Navigation Bar'? Wherever you get the script, doesn't it tell you there? If you have a JavaScript file, the link to it goes into the head section.

Share this post


Link to post
Share on other sites

Java and JavaScript are two totally different things.

 

As to the link you posted - click on the headers and it'll take you to the instruction page for each (Disclaimer: Not all pages appear to be active any more).

 

Usually, the scripts you find online come with documentation to help you get them going. If the one you want doesn't, keep looking.

 

Unfortunately, I cannot help you beyond this, because I do not know JavaScript, either, but in order to use it, you don't have to.

Share this post


Link to post
Share on other sites

If you want a drop down navigation bar you do not need javascript you can do it all with css. I like to use css over javacsript/jquery whenever possible. If this is what you are looking for (dropdown nav bar) let me know and I will give you some code you can customize.

Share this post


Link to post
Share on other sites

If you want a drop down navigation bar you do not need javascript you can do it all with css. I like to use css over javacsript/jquery whenever possible. If this is what you are looking for (dropdown nav bar) let me know and I will give you some code you can customize.

It's true that you can have CSS only dropdown/flyout menus. The only time you need javascript is for visual effect such as how it drops down or flies out or adding a class to show an arrow indicating there is a sub menu, etc. Almost all my jobs have such script.

 

As for CSS3 made menus, I have not used this on any jobs but I would think improvements have been made. The issue though is that it's doesn't support legacy browsers in which case you need to use jquery so that it does.

  • Upvote 1

Share this post


Link to post
Share on other sites

Yes and no, Eddie. You can use and small image (sprite) for the arrows if you want them and you can use css transitions for a fade in effect. Here is all the code with comments. Personally I do not use javascript/jQuery if I do not have to, because it is less HTTP request to the server making your site load faster.

 

For those that do not know about em's. Yes you can use pixes instead of em's. I just like em's better because it gives me more control than pixels do. For those that do not know em is a relative unit of measurement. It is the size of an uppercase M in whatever font that you are using. And the best thing about using em's is that it is a relative unit of measurement and that the element will scale if the view port is magnified or minified. This is especially nice with buttons.

 


<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>horizontal menu with sub menu</title>
<style>
html {
background: #E6E3D4;
}
body {
font: 100% Georgia, "Times New Roman", Times, serif;
line-height: 1.4;
width: 70%;
margin: 0 auto;
}


/*horizontal menu styles*/
nav{
background:#916A31;
height:2.3em;/*what this does with the ul height is make the brown border on the bottom an option to making a bottom border*/
margin-top:100px;/*this is just here to push the nav away from the top of the screen to see the rounded corners.*/
}
ul, li{
margin: 0;
padding: 0;
list-style:none;
float:left;	
}
ul{
background:#D5973C;
height:2em;
width:100%;
}
li{
position:relative;/*this is because I am using absalute position on the submenu*/
}
li a{
display:block;
line-height:2em;/*using this with the ul height of 2em to make the height of the ul and the li*/
padding:0 1em;
color:#FFF;
text-decoration:none;
}
/*the > is a child cominater<--misspelled is simmler to a desendent selector. What is is doing is making the rule very specific. It says to target any li child the topMenu and only in the topMenue. And then any links that are a direct child of the li */
li a:hover, .topMenu > li:hover > a{
background:#916A31;
height:2em;
padding-top:.3em;
position:relative;/* postioning it this way instead of using a margin helps stop any conflicks that might acure with a eliment above or below it*/
top:-.3em;
border-radius:.3em .3em 0 0;
}
/* the .topMenu li:hover a.current keeps the above hover from overriding the current style*/
.current, a:hover.current, .topMenu li:hover a.current{
background:#AD9B75;
color:#EEE;
padding-top:.3em;
position:relative;
top:-.3em;
border-radius:.3em .3em 0 0;
border-bottom:.3em solid #917f63;
cursor:default;
}
/*dropdown menu styles*/
/*the reason that I built the submenues this way is that this way screen readers can read them*/
ul.subMenu{
float:none;
background:#916a31;
width:auto;
height:auto;
position:absolute;/*this with the top 2m keep the sub menu from being pushed down when the main nav is hovered*/
top:2em;
left:-5098em;/*this is to push the submenu off any size screen until hovered over. Use any number that you want just make sure that it is big enough to puse off any screen, even a telvision screen. Yes you could use dispaly none or something else but then again screen readers can not read them thus nither will google*/
max-height:0;/*this is for the transitions work right.*/
-mox-transition:max-height 0.5s ease-in-out;/*these are the transition rules that make the submenu ease in. For browsers that do not support them the submenu just pops in.*/
-webkit-transition:max-height 0.5s ease-in-out;
-o-transition:max-height 0.5s ease-in-out;
transition:max-height 0.5s ease-in-out;
overflow:hidden;/*this is to keep the text from the dropdown menu from showing up before the animation finishes*/
}
ul.subMenu li{
float:none;
}
.topMenu li:hover ul{
left:0;/*this makes the submenue comeback on hover*/
max-height:10em;/*this is not what the height will be it is just giving enough spase for the auot height to work.*/
}
ul.subMenu li a{
border-bottom:1px solid #FFF;
padding: .2em 1em;
white-space:nowrap;/*this is to make the link stay on one line no matter how long it is*/
}
ul.subMenu li:last-child a{
border-bottom:none;
}
ul.subMenu li a:hover{
background:#D5973C;
height:2em;
padding-top:.2em;
top:0;
border-radius:0;
}
</style>
</head>
<body>

<nav>
<ul class="topMenu">
<li><a href="horizontal_menu.htm"class="current">Home</a></li><!--the class current needs to be on the active page and only the active page ot it will show more than one active page.-->
<li><a href="#">tutorials</a><!-- inportent here the submenu has to be afte the closing </a> and before the closing </li> or ir will not work-->
	<ul class="subMenu">
         <li><a href="#">something</a></li>
         <li><a href="#">something Else</a></li>
         <li><a href="#">link 3</a></li>
         <li><a href="#">link 4</a></li>
	</ul>
</li>
<li><a href="#">contact</a>
	<ul class="subMenu">
         <li><a href="#">something</a></li>
         <li><a href="#">something Else</a></li>
         <li><a href="#">link 3</a></li>
         <li><a href="#">link 4</a></li>
	</ul>
</li>
<li><a href="#">fourm</a></li>
<li><a href="#">services</a>
<ul class="subMenu">
         <li><a href="#">something</a></li>
         <li><a href="#">something Else</a></li>
         <li><a href="#">link 3</a></li>
         <li><a href="#">link 4</a></li>
	</ul>
</li>
</ul>
</nav>
</body>
</html>

Edited by grabenair
  • Upvote 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...