Flickr-Style CSS Menu - Need Help With Odd Behaviour

Hi.

I am having problems with gettting the below code to behave how I want
it to behave.
It is a "Flicker-Style" navigation menu. When you click on the arrow
(I haven't provided
the arrow graphics, if you try it, you can substitute any image for
arrow.png) for the
right-hand menu, the left-hand menu disappears. When you click on the
right-hand
menu, the sub-menu appears on the left-hand side.

It doesn't look like the javascript is replacing the menu and I have
checked to see if
I somehow am not naming a menu correctly but these things check out.

Would some kind soul mind giving the below code a go and helping me
with the problem?

Thanks.

<style type="text/css">
body{font-family:Arial, Helvetica, sans-serif; font-size:15px;
background:#FFFFFF;}
#container{margin:0 auto; width:600px;margin-top:30px;}
a:link, a:visited{color:#0066CC; text-decoration:none;}
a:hover{text-decoration:underline;}
ul, li{margin:0; border:0; list-style:none; padding:0;}
ul{border-bottom:dotted 1px #DEDEDE;}
ul{height:21px;}
li{display:inline;}
..menu span{border:solid 1px #EFEFEF; padding:4px 2px 4px 6px; border-
bottom:none; margin-right:10px; line-height:18px;}
..menu span a{font-weight:bold;}
..menu span:hover{border:solid 1px #DEDEDE; border-right:1px solid
#999999; border-bottom:none;}
..arrow{margin-left:4px; cursorointer; }
..sub_menu{display:none; position:relative; border:solid 1px #DEDEDE;
border-top:none; border-right:solid 1px #999999; border-bottom:solid
1px #999999; padding:10px; top:2px; width:120px; background:#FFFFFF;}
..sub_menu a:link, .sub_menu a:visited, .sub_menu a:hover
{display:block; font-size:11px; padding:4px;}
..item_line{border-top:solid 1px #DEDEDE;}
</style>

<script type="text/javascript">
function showMenu(id_menu){
var my_menu = document.getElementById(id_menu);
if(my_menu.style.display=="none" || my_menu.style.display==""){
my_menu.style.display="block";
} else {
my_menu.style.display="none";
}
}
</script>
<div id="container">
<ul>
<li class="menu" id="Profile">
<span>
<a href="index.html">Profile</a><img src="arrow.png"
name="arrow_profile" width="18" height="15" align="top" class="arrow"
onClick="javascript:showMenu('id_menu_profile')"
onmouseup="javascript:swapImage(1)" onmouseover="javascript:swapImage
(0)" onmouseout="javascript:swapImage(2)" />
</span>
<div class="sub_menu" id="id_menu_profile">
<a href="index.html">Modify Profile</a>
<a href="index.html">Contact List</a>
<a href="index.html">Add photo</a>
<a href="index.html" class="item_line">Invite your Friends</a>
<a href="index.html">Invite History</a>
<a href="index.html">Guest Pass History</a>
</div>
</li>
<li class="menu" id="Something">
<span>
<a href="index.html">Something</a><img src="arrow.png"
name="arrow_profile" width="18" height="15" align="top" class="arrow"
onClick="javascript:showMenu('id_menu_something')"
onmouseup="javascript:swapImage(1)" onmouseover="javascript:swapImage
(0)" onmouseout="javascript:swapImage(2)">
</span>
<div class="sub_menu" id="id_menu_something">
<a href="index.html">Modify Something</a>
<a href="index.html">Contact List</a>
<a href="index.html">Add photo</a>
<a href="index.html" class="item_line">Invite your Friends</a>
<a href="index.html">Invite History</a>
<a href="index.html">Guest Pass History</a>
</div>
</li>
</ul>
</div>

On Dec 4, 11:40*am, pbd22 <dush... (AT) gmail (DOT) com> wrote:

Hi.

I am having problems with gettting the below code to behave how I want
it to behave.
It is a "Flicker-Style" navigation menu. When you click on the arrow
(I haven't provided
the arrow graphics, if you try it, you can substitute any image for
arrow.png) for the
right-hand menu, the left-hand menu disappears. When you click on the
right-hand
menu, the sub-menu appears on the left-hand side.

It doesn't look like the javascript is replacing the menu and I have
checked to see if
I somehow am not naming a menu correctly but these things check out.

Would some kind soul mind giving the below code a go and helping me
with the problem?

Thanks.

style type="text/css"
body{font-family:Arial, Helvetica, sans-serif; font-size:15px;
background:#FFFFFF;}
#container{margin:0 auto; width:600px;margin-top:30px;}
a:link, a:visited{color:#0066CC; text-decoration:none;}
a:hover{text-decoration:underline;}
ul, li{margin:0; border:0; list-style:none; padding:0;}
ul{border-bottom:dotted 1px #DEDEDE;}
ul{height:21px;}
li{display:inline;}
.menu span{border:solid 1px #EFEFEF; padding:4px 2px 4px 6px; border-
bottom:none; margin-right:10px; line-height:18px;}
.menu span a{font-weight:bold;}
.menu span:hover{border:solid 1px #DEDEDE; border-right:1px solid
#999999; border-bottom:none;}
.arrow{margin-left:4px; cursorointer; }
.sub_menu{display:none; position:relative; border:solid 1px #DEDEDE;
border-top:none; border-right:solid 1px #999999; border-bottom:solid
1px #999999; padding:10px; top:2px; width:120px; background:#FFFFFF;}
.sub_menu a:link, .sub_menu a:visited, .sub_menu a:hover
{display:block; font-size:11px; padding:4px;}
.item_line{border-top:solid 1px #DEDEDE;}
/style

script type="text/javascript"
function showMenu(id_menu){
var my_menu = document.getElementById(id_menu);
if(my_menu.style.display=="none" || my_menu.style.display==""){
my_menu.style.display="block";} else {

my_menu.style.display="none";}
}

/script
div id="container"
ul
li class="menu" id="Profile"
span
* * <a href="index.html">Profile</a><img src="arrow.png"
name="arrow_profile" width="18" height="15" align="top" class="arrow"
onClick="javascript:showMenu('id_menu_profile')"
onmouseup="javascript:swapImage(1)" onmouseover="javascript:swapImage
(0)" onmouseout="javascript:swapImage(2)" /
/span
div class="sub_menu" id="id_menu_profile"
* * * * <a href="index.html">Modify Profile</a
* * * * <a href="index.html">Contact List</a
* * * * <a href="index.html">Add photo</a
* * * * <a href="index.html" class="item_line">Invite your Friends</a
* * * * <a href="index.html">Invite History</a
* * * * <a href="index.html">Guest Pass History</a
/div
/li
li class="menu" id="Something"
span
* * <a href="index.html">Something</a><img src="arrow.png"
name="arrow_profile" width="18" height="15" align="top" class="arrow"
onClick="javascript:showMenu('id_menu_something')"
onmouseup="javascript:swapImage(1)" onmouseover="javascript:swapImage
(0)" onmouseout="javascript:swapImage(2)"
/span
div class="sub_menu" id="id_menu_something"
* * * * <a href="index.html">Modify Something</a
* * * * <a href="index.html">Contact List</a
* * * * <a href="index.html">Add photo</a
* * * * <a href="index.html" class="item_line">Invite your Friends</a
* * * * <a href="index.html">Invite History</a
* * * * <a href="index.html">Guest Pass History</a
/div
/li
/ul
/div

It looks like the menu item to the right is getting pushed down when i
click on a menu item to the left.

so, if i have the below:

Item A | Item B | Item C

and I click on Item A (and fire the submenu), the result is

Item A |
Item B |
Item C |

But, I want the horizontal appearance to remain with the submenu.

"pbd22" <dushkin (AT) gmail (DOT) com> wrote

On Dec 4, 11:40 am, pbd22 <dush... (AT) gmail (DOT) com> wrote:

Hi.

I am having problems with gettting the below code to behave how I want
it to behave.
It is a "Flicker-Style" navigation menu. When you click on the arrow
(I haven't provided
the arrow graphics, if you try it, you can substitute any image for
arrow.png) for the
right-hand menu, the left-hand menu disappears. When you click on the
right-hand
menu, the sub-menu appears on the left-hand side.

It doesn't look like the javascript is replacing the menu and I have
checked to see if
I somehow am not naming a menu correctly but these things check out.

Would some kind soul mind giving the below code a go and helping me
with the problem?

No, but you will likely get several kind souls if you post an url showing
the problem. Upload to a free host if you have nowhere else.

On Dec 4, 1:17*pm, "Nik Coughlin" <nrkn.... (AT) gmail (DOT) com> wrote:

"pbd22" <dush... (AT) gmail (DOT) com> wrote in message

news:71ee5ee1-b7ca-40f5-b182-de2675001890 (AT) t26g2000prh (DOT) googlegroups.com...
On Dec 4, 11:40 am, pbd22 <dush... (AT) gmail (DOT) com> wrote:



Hi.

I am having problems with gettting the below code to behave how I want
it to behave.
It is a "Flicker-Style" navigation menu. When you click on the arrow
(I haven't provided
the arrow graphics, if you try it, you can substitute any image for
arrow.png) for the
right-hand menu, the left-hand menu disappears. When you click on the
right-hand
menu, the sub-menu appears on the left-hand side.

It doesn't look like the javascript is replacing the menu and I have
checked to see if
I somehow am not naming a menu correctly but these things check out.

Would some kind soul mind giving the below code a go and helping me
with the problem?

No, but you will likely get several kind souls if you post an url showing
the problem. *Upload to a free host if you have nowhere else.

any suggestions on a place to upload this page?

thanks.

pbd22 <dushkin (AT) gmail (DOT) com> writes:

any suggestions on a place to upload this page?

<http://letmegooglethatforyou.com/?q=free+web+hosting>

sherm--

--
My blog: http://shermspace.blogspot.com
Cocoa programming in Perl: http://camelbones.sourceforge.net

pbd22 schrieb:

a href="index.html">Profile</a><img src="arrow.png"
name="arrow_profile" width="18" height="15" align="top" class="arrow"
onClick="javascript:showMenu('id_menu_profile')"
onmouseup="javascript:swapImage(1)" onmouseover="javascript:swapImage
(0)" onmouseout="javascript:swapImage(2)" /

The value type of onclick, onmouseup, onmouseover and onmouseout is
%Script; (script expression), not %URI; (a Uniform Resource Identifier).
So remove the "javascript:".

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

On Dec 4, 2:16*pm, Johannes Koch <k... (AT) w3development (DOT) de> wrote:

pbd22 schrieb:

* * <a href="index.html">Profile</a><img src="arrow.png"
name="arrow_profile" width="18" height="15" align="top" class="arrow"
onClick="javascript:showMenu('id_menu_profile')"
onmouseup="javascript:swapImage(1)" onmouseover="javascript:swapImage
(0)" onmouseout="javascript:swapImage(2)" /

The value type of onclick, onmouseup, onmouseover and onmouseout is
%Script; (script expression), not %URI; (a Uniform Resource Identifier).
So remove the "javascript:".

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
* * * * * * * * * * * * * * *(Te Deum, 4th cent.)

Thanks Johannes, much appreciated. I tried that but it didn't seem to
make a difference.

I have posted the basics of the navigation here:

http://dushkin.googlepages.com/navigation.htm

what I want is this:

LOGO NAV1 NAV2 NAV3
__________________________________________________ ___________________________________


I want the logo on the same horizontal plane as the navigation and I
want the main nav items to hold their position when submenus are
expanded. What seems to be bappening is that all the nav items to the
right are going to the bottom of the sub menu.

Thanks for any attention/help/feedback.

pbd22 wrote:

I have posted the basics of the navigation here:

http://dushkin.googlepages.com/navigation.htm

#container{margin:0 auto; left:0; width:600; top:20;
^^^ ^^

600 what? 20 what? Length values in CSS require units with exception for
'0' and 'line-height'


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On Dec 4, 5:58*pm, "Jonathan N. Little" <lws4... (AT) central (DOT) net> wrote:

pbd22 wrote:
I have posted the basics of the navigation here:

http://dushkin.googlepages.com/navigation.htm

#container{margin:0 auto; left:0; width:600; top:20;
* * * * * * * * * * * * * * * * * * * * *^^^ * * *^^

600 what? 20 what? Length values in CSS require units with exception for
'0' and 'line-height'

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

thanks. that was me fooling around with possible fixes and them
posting the code before
adding the "px" back. sorry about that. I have added them back but
this is not the answer
to my problem.

pbd22 wrote:

http://dushkin.googlepages.com/navigation.htm

want the main nav items to hold their position when submenus are
expanded. What seems to be bappening is that all the nav items to the
right are going to the bottom of the sub menu.

You need to relatively position the parent <li> and absolutely position
the child sub_menu. That takes the child out of the flow so the
positioning of the other parent <li>s aren't affected, and maintains the
positioning relationship between a parent and child.

I suggest, however, that instead of a child <div> you use a child <ul>.
It is more semantically correct and degrades better.

--
Berg