Hi all,
When I swapped laptops I lost all my bookmarks and I can't seem to find exactly what I'm after with a Google search.
Does anyone know a site that shows you how to do the navigation like the one on this page? It's mocked up here in Flash but I want to recreate it in HTML and Javascript and just wondered if anyone had come across one before. All the navigation will be using images rather than text links if that makes sense?
Cheers,
Suzy
Suzy 2008.01.04, 08:50PM — Rollover Navigation
Tha.Riddla 2008.01.04, 09:12PM —
like this?
alistapart.com/articles/hybrid
also some good stuff here:
smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
Suzy 2008.01.04, 09:34PM —
Kind of but I want to do it with all images and I want the navigation you have rolled on to stop there unless you roll over another navigation rather than revery back on roll off.
Thanks though Tha.Riddla they are two great bookmarks to try and build mine back up 
JimmyTheGent 2008.01.05, 12:10AM —
Do you have dreamweaver? It has a function which creates the javascript for you called rollover image.
Suzy 2008.01.05, 09:38AM —
yeah but it's the images underneath I want to appear on rollover as well as swapping the actual image under the cursor and I want them to stop there unless you rollover another menu button.
JimmyTheGent 2008.01.05, 03:43PM —
You could probably manage that in CSS.
If you have the image set to hidden using the visibility property. Not tested this but just a thought. Something along these lines might work....
css
.rollover img
{
visibility: hidden;
}
.rollover img:hover
{
visibility:visible;
}
xhtml markup
<div class="rollover">
<img src="image.jpg" alt="image" />
</div>
Tha.Riddla 2008.01.06, 11:53PM —
right, but she wants the sub-nav to stay there when you roll off except if you go to another main heading
(if I'm understanding correctly)
Tha.Riddla 2008.01.06, 11:57PM —
maybe look into a modifying this code? I use this on my site for tabs/divs
barelyfitz.com/projects/tabber/
adjusting from click to rollover might be just the ticket you're looking for.
Suzy 2008.01.07, 09:48AM —
Tha.Riddla - That's definitely more what I'm after but I'll be using all images instead of text links but looks like that is the start I was looking for. Thanks
poliguin 2008.01.08, 09:52PM —
brainjar.com/dhtml/menubar/
can be modified so that instead of text there are images and the rollover class has an image in it.
var _oRLY = {HAI:function(){return this.KTHXBYE(); },KTHXBYE:function(){ return this.HAI();},init:function(){ this.HAI()};_oRLY.init()?'YARLY':'NOWAI';
Suzy 2008.01.20, 11:46PM —
Hi guys,
Don't shoot me but due to a severe lack of time I've botched some old code to do what I wanted and the client said they now wanted the sub nav to disappear when you roll off. Here it is trenstar.com/index_new08_suz.asp Problem is it works perfect in IE but the positioning is slightly off in Mozilla. Any ideas on how to sort it?
Is it because I have a div inside a div?
Here is the CSS
A.Popup {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
COLOR: #ffffff;
TEXT-DECORATION: none;
font-weight: bold;
font-style: italic;
}
A.Popup:hover {
COLOR: #ffcc00;
TEXT-DECORATION: none
}
TD.Popup {
POSITION: relative;
}
DIV.mainPopup1 {
Z-INDEX: 999;
POSITION: absolute;
visibility: hidden;
}
DIV.subPopup1 {
Z-INDEX: 1000;
LEFT: 1px;
POSITION: absolute;
TOP: 1px;
visibility: hidden;
}Here is the page code with just one of the buttons and sub menus to give you an idea
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/layout/new/nav_left.jpg" width="113" height="21">
<a href="#"
onMouseOut="MM_swapImgRestore();window.clearTimeout(ID);ID = window.setTimeout('MM_showHideLayers(LastPopup,\'\',\'hide\',\'sub1\',\'\',\'hide\');',500); return false;"
onMouseOver="MM_swapImage('Company','','images/layout/new/company_btn_on.jpg',1);LastPopup = 'sub1';if (LastPopup == 'sub1') { window.clearTimeout(ID);} hideLast(); last = 1;MM_showHideLayers('sub1','','show'); return false;">
<img src="images/layout/new/company_btn.jpg" alt="Company" name="Company" width="81" height="21" border="0"></a>
<img src="images/layout/new/nav_right.jpg" width="107" height="21"></td>
</tr>
<tr>
<td height="24" background="images/layout/new/nav_bottom.jpg"><div class=mainPopup1 id=main1><div class=subPopup1 id=sub1><table height="5 "border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/layout/new/spacer.gif" width="120" height="10" align="left"></td>
<td class=Popup id=Popup1><A class=Popup
onmouseover="window.over('Popup1');window.clearTimeout(ID);"
onmouseout="window.out('Popup1');window.clearTimeout(ID);ID = window.setTimeout('MM_showHideLayers(LastPopup,\'\',\'hide\',\'sub1\',\'\',\'hide\');',500); return false;"
href="http://www.trenstar.com/company/about_trenstar.asp" >About Us </A> </td>
<td class=Popup id=Popup2><A class=Popup
onmouseover="window.over('Popup2');window.clearTimeout(ID);"
onmouseout="window.out('Popup2');window.clearTimeout(ID);ID = window.setTimeout('MM_showHideLayers(LastPopup,\'\',\'hide\',\'sub1\',\'\',\'hide\');',500); return false;"
href="http://www.trenstar.com/company/trenstar_management_team.asp" >Management Team </A> </td>
<td class=Popup id=Popup3><A class=Popup
onmouseover="window.over('Popup3');window.clearTimeout(ID);"
onmouseout="window.out('Popup3');window.clearTimeout(ID);ID = window.setTimeout('MM_showHideLayers(LastPopup,\'\',\'hide\',\'sub1\',\'\',\'hide\');',500); return false;"
href="http://www.trenstar.com/company/awards_trenstar.asp" >Awards </A> </td>
<td class=Popup id=Popup4><A class=Popup
onmouseover="window.over('Popup4');window.clearTimeout(ID);"
onmouseout="window.out('Popup4');window.clearTimeout(ID);ID = window.setTimeout('MM_showHideLayers(LastPopup,\'\',\'hide\',\'sub1\',\'\',\'hide\');',500); return false;"
href="http://www.trenstar.com/company/history_trenstar.asp" >History </A> </td>
<td class=Popup id=Popup5><A class=Popup
onmouseover="window.over('Popup5');window.clearTimeout(ID);"
onmouseout="window.out('Popup5');window.clearTimeout(ID);ID = window.setTimeout('MM_showHideLayers(LastPopup,\'\',\'hide\',\'sub1\',\'\',\'hide\');',500); return false;"
href="http://www.trenstar.com/company/frequently_asked_questions.asp" >FAQs </A> </td>
<td class=Popup id=Popup6><A class=Popup
onmouseover="window.over('Popup6');window.clearTimeout(ID);"
onmouseout="window.out('Popup6');window.clearTimeout(ID);ID = window.setTimeout('MM_showHideLayers(LastPopup,\'\',\'hide\',\'sub1\',\'\',\'hide\');',500); return false;"
href="http://www.trenstar.com/company/trenstar_other_companies.asp" >TrenStar Companies </A> </td>
<td class=Popup id=Popup7><A class=Popup
onmouseover="window.over('Popup7');window.clearTimeout(ID);"
onmouseout="window.out('Popup7');window.clearTimeout(ID);ID = window.setTimeout('MM_showHideLayers(LastPopup,\'\',\'hide\',\'sub1\',\'\',\'hide\');',500); return false;"
href="http://trenstar.sharepointsite.com/default.aspx" >Employee Login</A> </td>
</tr>
</table></div>
</div>
</td>
</tr>
</table>
WingNut 2008.01.22, 04:34PM —
Suzy, for a quick fix i'd do a first and second style for the different browsers. (bear in mind that this is a hack and not the best way to go about this, but it sounds like you're in a rush ... )
/*(this first style of the div id "holder" is for mozilla)*/
#holder {
border: 12px solid #fff;
margin: 20px auto;
width: 734px;
background-color: #94846e;
}
/*(this second style - prefaced by "html >" is for IE)*/
html > body #holder {
width: 732px;
}
note how in the second style, for IE, only the item that is different is changed ...
i hope this makes sense?
Suzy 2008.01.22, 04:39PM —
Cheers WingNut
I was wondering how to tell it to do different things for different browsers.
Suzy 2008.01.22, 11:51PM —
I tried this but it's not working I'm afraid
/*(this first style of the div id "holder" is for mozilla)*/
#DIV.subPopup1 {
Z-INDEX: 1000;
LEFT: 1px;
POSITION: relative;
TOP: 150px;
visibility: hidden;
}
/*(this second style - prefaced by "html >" is for IE)*/
html > body #DIV.subPopup1 {
TOP: 1px;
}
WingNut 2008.01.23, 01:50AM —
i think top and left tend to only work when using position:absolute ... ?
maybe try margin-top: 150px; instead
Suzy 2008.01.23, 07:35PM —
I realise by the time I've finished with this it would have been easier to re-write the thing but I have the added problem that it is someone else's webpage. I still can't get wingnut's quick fix to work. Just wondered if the doctype is causing a problem? Here's the page
Suzy 2008.01.23, 09:06PM —
Cheers for trying, think I'll leave it for a bit and come back to it another day
first
last