Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

A slightly more complicated menu bar


  • Please log in to reply
6 replies to this topic

#1 Katzekks

Katzekks

    CC Lurker

  • Just Joined
  • Pip
  • 4 posts

Posted 15 August 2009 - 09:13 PM

I'm stumped trying to put together a navigation bar for my page.

I want a horizontal menu bar across the top that stays stationary when the rest of the page scrolls, so I was using two different frames. But this menu also has drop down options when it is scrolled over and I want these drop down options to overlap the lower frame. Can I layer my frames somehow?

I've been stuck on this for weeks. Thanks!
  • 0

#2 WingedPanther73

WingedPanther73

    A spammer's worst nightmare

  • Moderator
  • 17757 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

Posted 16 August 2009 - 04:24 AM

Don't use frames. I would use a div container with position:fixed. That should do a nice job of moving it for you.

I used frames about 8 years ago for a site, and it did the job well. At the time, I didn't understand why people were so against frames and pro-table. The reality is this: frames generally don't do the job well.
  • 0

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

My MineCraft server site: http://banishedwings.enjin.com/


#3 Katzekks

Katzekks

    CC Lurker

  • Just Joined
  • Pip
  • 4 posts

Posted 18 August 2009 - 04:06 PM

Thanks for the hint!

Edited by Katzekks, 18 August 2009 - 08:06 PM.
fixed the problem

  • 0

#4 Katzekks

Katzekks

    CC Lurker

  • Just Joined
  • Pip
  • 4 posts

Posted 18 August 2009 - 08:21 PM

I managed to fix the previous problems I had. The menu bar works just like I wanted it to! The very last problem I have is that it I've got the menu bar in a combination of a table with lists. On mouse-over, the further options drop down. The background color of the table is black and non-transparent, like I want it to be. However, when the options drop down, they are transparent and drop over the lower page.

How can I give this mouse-over options a non-transparent black background?

Thanks so much! This is my style code... I assume I need another line in there somewhere, but I grabbed it from a temp site and worked around with it a little. Unfortunately I'm not good enough at this to be able to figure out what I need to put where.

<style type="text/css">

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }

li {
  float: left;
  position: relative;
  width: 13em;
  text-align: center;
  padding: 1;
  }

li ul {
  display: none;
  position: absolute; 
  top: 100%;
  left: 0;
  padding: 10;
  }

li > ul {
	top: auto;
	left: auto;
	}

ul li a {
	display: block;
	text-decoration: none;
	background: #fff
	padding: 8px;
	}

li:hover ul { display: block; }

clear: left

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

</style>

Edited by WingedPanther, 19 August 2009 - 07:31 AM.
add code tags (the # button)

  • 0

#5 WingedPanther73

WingedPanther73

    A spammer's worst nightmare

  • Moderator
  • 17757 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

Posted 19 August 2009 - 07:33 AM

It will depend on how your menu code actually works. I can't tell from your description. Also, it looks like you have VBScript in your Style code. That won't work.

Also, please use code tags (the # button) when posting code.
  • 0

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

My MineCraft server site: http://banishedwings.enjin.com/


#6 Katzekks

Katzekks

    CC Lurker

  • Just Joined
  • Pip
  • 4 posts

Posted 20 August 2009 - 08:20 PM

Hmm. Well, unfortunately I don't know 100% what I'm actually doing. I'm just working off of what I've tried to teach myself in the last week. I usually work with pretty simple work.

Right now I assume that I want two different div containers. I need my navigational bar and then the rest of the page. I got everything to work perfectly on my home page, but it didn't work so nicely when I got to the more complicated pages.

The menu bar, to try to explain it a little better, is from code I took from a tutorial. Visually, it's a horizontal bar with six options. Scrolling over the options drops down between 0 and 3 links that take you to other pages. I did this by creating a horizontal list with the code I posted earlier. As I said, this works wonderfully in my home page which is just a few paragraphs.

My problem comes in some of the other pages which have lists already. I want these lists to be vertical and have 1em spacing between the bullet points. I also want them to have bullet points where my menu does not.

Here's where I think it should be pretty easy. From what I was understanding about div containers, I should just create two, right? A "div id = menu" and a div id="main" and label these two sections. Then I can write specific code for the lists of each one. That was my basic assumption anyway, but I guess I don't know what I'm doing enough to figure out why this doesn't work.

I've also had some issues figuring out how to style the div containers. If my id's were main and menu would I do

div.main {
  li {margin: 1em 0}
  }
or
#main {
  li {margin: 1em 0}
  }

Again, the styling for the menu was posted earlier.
I guess the main question is, since I can get the menu to work on a page with out lists, how do I style vertical lists with spacing between them?

Sorry, I wish I had a better idea what I was talking about, but maybe if I did this would be obvious to me, too...
  • 0

#7 WingedPanther73

WingedPanther73

    A spammer's worst nightmare

  • Moderator
  • 17757 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

Posted 21 August 2009 - 08:17 AM

Without seeing some HTML code, we can't help you.
  • 0

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

My MineCraft server site: http://banishedwings.enjin.com/





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download