And as far as the scale of the images, I have them fixed and wasn’t planning on having them change size, mostly because I’m new to JS and HTML, and also I didn’t see a reason for it either lol.
OK, cool. I’ll go with approximately what you have on the page and get back with you when I have something useful.
Ok great thanks, btw, the original scales of the images are as follows: Holographic menu: 2000px by 2000px
Nav Button: 400px by 400px
They are re-sized to: Holographic menu: 300px by 300px
Nav Button: 50px by 50px
Just take a normal drop down menu and style it like that. Would be very easy. You need a drop down example?
Well, how would I overlay my holographic styled image over a drop down menu?
The ul ul would hold the image. The ul ul li would hold the buttons.
Where do you want the holographic menu positioned on the page?
At this time, it is absolutely positioned a fixed distance from the top and left of the page. If the window is narrowed enough, the menu will flow beneath the logo.png image.
At this time, the logo.png remains centered horizontally and vertically on the page.
Do you want the holographic menu to be vetically centered to the left of the logo.png? (It will still flow beneath logo.png at narrow widths.)
Or do you want the holographic menu to remain absolutely positioned as it is now?
Or do you have another idea in mind?
Ok so I don’t know what a ‘ul ul’ is I’m sorry, I’m still new to all this. and for the position of the menu, I don’t care where it is as long as it is the distance it currently is from the nav button, other than that I don’t care.
The files in the link below are a complete web page. Download the folder to your PC and double-click CrossfireOmega-1a.html to try it out.
The nav images are slightly larger than your draft. Barely noticable
The navigation menu behaves like this:
- hover over the blue area - nothing happens
- hover over the “nav” button, the menus appear over the blue area.
- hover over each menu item, a white border appears that turns red on mouse-down.
- leave the menu area and the menu disappears.
All of the images are new. Why? To save a ton of bytes.
The new images have new names as shown in the following list.
The difference between your original images and the cropped and resized images is:
originals remakes
-------------------------- -----------------------
logo.png 891 KB logo3.png 115 KB
grunge2.jpg 2,082 KB grunge40.jpg 163 KB
navcluster.png 514 KB nav-back-6.png 9 KB
navcluster1.png 514 KB nav-top-6.png 9 KB
menuoverlay.png 649 KB menu-back-3.png 82 KB
menuoverlay2.png 786 KB menu-top-3.png 96 KB
--------- --------
TOTALS 5,436 KB 474 KB
The compact images result in much faster page loading time and faster menu transitions.
Wow, It looks amazing! I love the outline you did on the second one. It works exactly how I envisioned it, except I was wanting the blue holo menu to disappear until you clicked on the nav button, other than that it’s perfect!
Yes, because the holo menu is made of two images, a “front” image overlaying the “back” image, I wasn’t really clear about how it was supposed to work, so I gave it a guess.
Let’s try this…
Go to line 39 on the page and comment out the “back” image line like this:
#menubox {
width:300px;
height:307px;
/* background:url('imgs/menu-back-3.png') no-repeat; /* */
position:relative;
margin-left:29px;
margin-top:169px;
}
Except that the menu is still responds to “hover” instead of “click” to show the menu, is that the effect that you desire?
Well preferably I would like it to respond to “click” if possible.
With line 39 commented out, both “holo” images disappear (including the “back” image) until the “nav” button is :hovered, then the “top” holo image appears.
Is that the “look” that you wish?.. nothing “holo” (not even the empty “back” image), then “holo” menus?
I am asking your to confirm the the way the images should look/behave. Nothing then everything, instead of “placeholder” then “menu items” (the way my first guess was coded).
I got that… several times.
Changing the “nav” button from CSS :hover to JavaScript click to effect the desired behavior will happen after the desired look is determined and the correct CSS and images are in place to allow that to happen efficiently.
Consider the :hover action to be a temporary substitute for the click action because I do not code JavaScript.
BTW - the click action can be coded in CSS, but I am not sure how widely supported it is; it is not supported in older browsers. I am more confident that most gamers keep JavaScript turned ON, so I recommend going with a JavaScript solution AFTER we make sure we have the sequence of events understood and right images in place.
The op mentioned that this is just a small site mainly aimed at friends, so I think it should be safe enough to use :target for the click. Is that what you were thinking of, Ron? We had a member here a few years ago who did his whole navigation with target, and I think he worked out a fallback for older browsers, too.
Everything right now looks and behaves exactly how it should, thank you. Do you think it works and looks better if it is a “hover over” effect?
Oh, and sorry, but where in the code to I put the links for the link buttons?
Inside the anchor tags:
<ul id="menu">
<li class="home">[color=blue]<a href="#"></a>[/color]<p>home</p></li>
<li class="music">[color=blue]<a href="#"></a>[/color]<p>music</p></li>
<li class="movies">[color=blue]<a href="#"></a>[/color]<p>movies</p></li>
<li class="images">[color=blue]<a href="#"></a>[/color]<p>images</p></li>
<li class="contact">[color=blue]<a href="#"></a>[/color]<p>contact</p></li>
</ul>
Just replace the hash with the URL or path to the target page.
Lol thanks, sorry, I went over it repeatedly and just didn’t see it for some reason.
(1) Does “right now” mean with the “back” image commented out?
(2) In my opinion, I would keep the :hover behavior exactly the way it is. If anyone of your friends uses a touch screen that requires click behavior, I would add that for them. I would not require desktop or laptop users who have a mouse, trackpad, or who can simulate :hover behavior to click on anything unnecessarily. In other words, I would not take away the :hover behavior and require a click to show the menu. Requiring seemingly unnecessary clicks is a put-off. That’s just my opinion, though. I’m not a gamer 
.
Yes, that is what I was thinking of, thanks. I would be interested in seeing how those fallbacks were designed. Are there any of old member’s posts around that would include that code?