DHTML newbie

**petdominic** · 06-10-2010, 08:42 PM

I'm hoping someone will be patient enough to help me. I'm working in FrontPage and was thinking how best to design my site. In research I came across navbars. I see there are many options and I think the nested side bars would work best. However, I have no idea where to begin. I see the code is available but not really sure what to do with it. I don't mind reading so feel free to point me to a helpful tutorial website. I'm on the "code" tab of Frontpage and stuck now. Please help.
http://www.dynamicdrive.com/style/cs...side_bar_menu/

**azoomer** · 06-10-2010, 09:20 PM

Hi i don't know frontpage, but i have attached a zip folder with the nav bar example code put into an html page. You can download it, unzip it and open it in your browser to see how it looks. After that open it in front page and take a good look at the source code. Maybe you will be able to customize it to your needs then. If not... ask again and explain what changes you want.

**petdominic** · 06-11-2010, 03:50 PM

Thank you so much! I've been able to play around and gain an understanding on how to customize it. Another question (of course). I'm struggling with properly placing it into the code I already have. I'm doing something wrong b/c it either appears off in placement or completely freezes!

Where should I put the code from the navbar in my other page created? I have provided code from my page in the attachment along with customized navbar code below.

Navbar Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 12px Calibri;
width: 120px; /* Main Menu Item widths */
border-bottom: 1px solid #FFFFFF;
}
.sidebarmenu ul li{
position: relative;
}
/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #FFFFFF; /*background of tabs (default state)*/
}
.sidebarmenu ul li a:visited{
color: white;
}
.sidebarmenu ul li a:hover{
background-color: silver;
}
/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}
.sidebarmenu a.subfolderstyle{
background: url('../Local%20Settings/Temp/Temporary%20Directory%202%20for%20navbar.zip/navbar/right.gif') no-repeat 97% 50%;
}
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */
</style>
<script type="text/javascript">
//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</script>

</body>

<body text="#FFFFFF" bgcolor="#FFFFFF">
<div class="sidebarmenu" style="color: #FFFFFF; border: 1px solid #FFFFFF; padding-left: 160px; padding-top: 320px; background-color: #FFFFFF">
<ul id="sidebarmenu1" style="color: #FFFFFF; border: 1px solid #FFFFFF; background-color: #FFFFFF">
<li><a href="#">Argentina</a></li>
<ul>
<li><a href="#">Internal Datasheet</a></li>
<li><a href="#">Client Facing</a></li>
</ul>
</li>
<li><a href="#">Brazil</a></li>
<ul>
<li><a href="#">Internal Datasheet</a></li>
<li><a href="#">Client Facing</a></li>
</ul>
</li>
<li><a href="#">Colombia</a>
<ul>
<li><a href="#">Internal Datasheet</a></li>
<li><a href="#">Client Facing</a></li>
</ul>
</li>
<li><a href="#">Mexico</a></li>
<ul>
<li><a href="#">Internal Datasheet</a></li>
<li><a href="#">Client Facing</a></li>
</ul>
</li>

</ul>
</div>

**azoomer** · 06-11-2010, 04:35 PM

Unfortunately I can't open .docx documents. The basic layout of your code should follow this structure

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>  this tag opens the head section

metatags, css and scripts can be placed here

</head> ends the head section

<body> opens the body (page content) section

lists (navigation) and page content goes here

</body> ends the body section
</html> ends the document

For example: you may not put the </body> before <body> . It has to be the other way around and the navigation and other content can be placed between <body> and </body>. Also make sure you only have one copy of each of these on your page <html> <head> </head <body> </body> </html>

**petdominic** · 06-11-2010, 05:13 PM

Okay I am making slight progress. Thank you for explaining that piece...helps me to understand more! I think I've figured out what my problem might be. I have multiple sections with <body> and </body>. Is that allowed? I was trying to place the navbar BODY code within my other BODY section and still it locks up. So I know it's still off. I'll keep trying. Only way to learn is practice.

But I've gone ahead and posted the code from my beginning page in a .doc file. Perhaps you may have a little time to view and offer one example seeing my code now.

Thanks again for your help

**azoomer** · 06-11-2010, 05:55 PM

Okay now i can see your page. I understand if you find it hard to figure out. You have a lot of code and it is difficult to get an overview. I would suggest that you start out with getting the basic page structure with <div> and css before you put all the javascript on the page. Personally i would advice you to get rid of the tables all together. About your question regarding the body tag : Only one <body> and one </body> is allowed. And also you should not put anything between </head> and <body>. On your page there is a lot of " microsoft stuff " and tables that are cluttering the code. If i were you I would start from scratch with a clean page structure and add one basic element at the time, focusing on html with divs and css to place these divs in the right location. The code structure and elements of your page now is too confusing for me to be able to integrate the other navigation. Keep it simple, that will give you a far better understanding of what's going on.

The best way to structure your page would, in my opinion, be to have the css and javascript in separate files that you link to in the head of the html document. Avoid tables if possible and try also to avoid inline styles (css) and inline javascript if possible.

Some links: http://www.w3schools.com/ with a lot of tutorials
And the validator for html: http://validator.w3.org/ where you can check if you page has errors
If it is not online you can get the totalvalidator firefox add on and use locally. It is very helpfull.
Regarding css: the firebug add on is invaluable.

Thread: DHTML newbie

Thread Tools

Search Thread

DHTML newbie

Bookmarks

Bookmarks

Posting Permissions