quote:

ORIGINAL: erinatkins

Hi All.

I have been able to do a basic CSS navigation menu on left.

Is it possible to do a CSS drop down menu without java? I have not seen one when I have searched on web.

Thanks
Erin

quote:

ORIGINAL: erinatkins
I would love to see this work with CSS in future.

quote:

I'll play about with it tonight, see if I can make one, and I'll keep going till I do . I just wanna prove myself wrong really!

quote:

ORIGINAL: Giomanach


1. You need the JavaScript to hide/show the menu items. ..... But the JavaScript is required to hide the menu items.

2. All you can really use CSS for with them is to format the links.

3. Sorry I'm not much use,

Dan

Signature self-censored to protect the sensibilities of the thin-skinned .

May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower

(in reply to Giomanach)

quote:

ORIGINAL: gorilla

quote:

ORIGINAL: Giomanach


1. You need the JavaScript to hide/show the menu items. ..... But the JavaScript is required to hide the menu items.

2. All you can really use CSS for with them is to format the links.

3. Sorry I'm not much use,

Dan

1. Not in fact correct

2. Definitely not in fact correct.

3. Three inaccurate statements in a row - not one of your better posts!

http://www.evolt.org/article/How_to_make_a_simple_CSS_dropdown_menu/17/52030/

http://www.meyerweb.com/eric/css/edge/menus/demo.html (the start of it all)

Tabs with dropdowns.

http://www.kalsey.com/tools/csstabs/

One with js (lightweight and good)

http://www.alistapart.com/articles/dropdowns

Many of the problems arise from IE's non compliant rendering algorithm. We're working on this one too results are promising even in IE but ooh man (or skating cat) it's hard going.



Mhaircaish

<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 7;

//menu constructor
function menu(allitems,thisitem,startstate){ 
  callname= "gl"+thisitem;
  divname="subglobal"+thisitem;  
  this.numberofmenuitems = 7;
  this.caller = document.getElementById(callname);
  this.thediv = document.getElementById(divname);
  this.thediv.style.visibility = startstate;
}

//menu methods
function ehandler(event,theobj){
  for (var i=1; i<= theobj.numberofmenuitems; i++){
    var shutdiv =eval( "menuitem"+i+".thediv");
    shutdiv.style.visibility="hidden";
  }
  theobj.thediv.style.visibility="visible";
}
				
function closesubnav(event){
  if ((event.clientY <48)||(event.clientY > 107)){
    for (var i=1; i<= numofitems; i++){
      var shutdiv =eval('menuitem'+i+'.thediv');
      shutdiv.style.visibility='hidden';
    }
  }
}
// -->
</script>

<script type="text/javascript">
    <!--
      var menuitem1 = new menu(7,1,"hidden");
			var menuitem2 = new menu(7,2,"hidden");
			var menuitem3 = new menu(7,3,"hidden");
			var menuitem4 = new menu(7,4,"hidden");
			var menuitem5 = new menu(7,5,"hidden");
			var menuitem6 = new menu(7,6,"hidden");
			var menuitem7 = new menu(7,7,"hidden");
    // -->
    </script>

<div id="globalNav"> 
    <img alt="" src="gblnav_left.gif" height="32" width="4" id="gnl"> <img alt="" src="glbnav_right.gif" height="32" width="4" id="gnr"> 
    <div id="globalLink"> 
      <a href="index.html" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">Home</a><a href="internet%5Cindex.html" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">Internet</a><a href="office%5Cindex.html" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">Office</a><a href="adobe%5Cindex.html" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">Adobe</a><a href="psp%5Cindex.html" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">PSP</a><a href="hardware%5Cindex.html" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">Hardware</a><a href="win%5Cindex.html" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">Windows</a> 
    </div> 
    <!--end globalLinks--> 
  </div>
  <!-- end globalNav --> 
  <div id="subglobal1" class="subglobalNav">  </div> 
  <div id="subglobal2" class="subglobalNav"> 
    <a href="internet%5Cie%5Cindex.html">Internet Explorer</a> | <a href="internet%5Cweb%5Cindex.html">Web Design</a> | <a href="internet%5Cwhat">What Is The Internet?</a> | <a href="internet\fp\index.html">Frontpage</a> | <a href="internet\dw\index.html">Dreamweaver</a> 
  </div> 
  <div id="subglobal3" class="subglobalNav"> 
    <a href="office%5Cword%5Cindex.html">Word</a> | <a href="office%5Cexcel%5Cindex.html">Excel</a> | <a href="office%5Caccess%5Cindex.html">Access</a> | <a href="office%5Cppt%5Cindex.html">Powerpoint</a> | <a href="office%5Coutlook%5Cindex.html">Outlook</a> |  
  </div> 
  <div id="subglobal4" class="subglobalNav"> 
    <a href="#">Acrobat</a> | <a href="#">Photoshop</a> </div> 
  <div id="subglobal5" class="subglobalNav"><a href="psp%5Cpsp7%5Cindex.html">PSP7</a> | <a href="psp%5Cpsp8%5Cindex.html">PSP8</a> 
  </div> 
  <div id="subglobal6" class="subglobalNav"> 
    <a href="hardware%5Cbasics.htm">Basics</a> | <a href="hardware%5Cparts.htm">The Parts</a> | <a href="hardware%5Cbuild.htm">Building Your Own</a> | <a href="hardware%5Cproblems.htm">Problems</a> </div> 
  <div id="subglobal7" class="subglobalNav"><a href="win%5Cwin31%5Cindex.html">Windows 3.1</a> | <a href="win%5Cwin9xme%5Cindex.html">Windows 9x/Me</a> | <a href="win%5Cwin2k%5Cindex.html">Windows 2000</a> | <a href="win%5Cwinxp%5Cindex.html">Windows XP</a> </div> 
  <div id="subglobal8" class="subglobalNav"> 
  <a href="#">Windows 3.1</a> | <a href="#">WIndows 9x/Me</a> | <a href="#">WIndows 2000</a> | <a href="#">Windows XP</a></div> 
</div> 

<body onmousemove="closesubnav(event);"> 

quote:

ORIGINAL: Giomanach

Hate to say this Mhaircaish but I am right. By drop down list Erin means one like the Global Nav Bar here

I have looked at making one like that with pure CSS, all CSS allows you to do is hide it, not show on hover.

The links that you have given only give a list, not a drop down list. With what I was doing, I got as far as one div tag, with two layers in it. One for the main menu and another for the submenu which appears when you hover on one of the links. JavaScript is required to hide and show the sub menu.

If you can prove me wrong go ahead. But I tried the menus on those links for myself and all I got was a list, with idented links for the submenus

Dan

Signature self-censored to protect the sensibilities of the thin-skinned .

May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower

(in reply to Giomanach)

quote:

attila the hen aaka my rehab person has me worn out. )

quote:

ORIGINAL: gorilla

LOL dan you don't know me or you wouldn't say that

I know exactly what Erin was talking about and I have got pure css dropdowns working. The problem I'm having is getting them compatible crossbrowser. Shouldn't be long now not more than a few weeks (and a few weeks only because attila the hen aaka my rehab person has me worn out. )

I'll post the code when its ready - links above show the current "state of the art" check them in several browsers btw - me I like to push a bit.

Mhaircaish

quote:

I know exactly what Erin was talking about and I have got pure css dropdowns working. The problem I'm having is getting them compatible crossbrowser. Shouldn't be long now not more than a few weeks (and a few weeks only because attila the hen aaka my rehab person has me worn out. )

I'll post the code when its ready - links above show the current "state of the art" check them in several browsers btw - me I like to push a bit.

quote:

ORIGINAL: Giomanach

1. And does aaka mean also adversely known as?

2. I would like to see the pure CSS drop down, with no other scripts in it, but take your time, some one in your position shouldn't be rushing themselves

Signature self-censored to protect the sensibilities of the thin-skinned .

May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower

(in reply to Giomanach)

quote:

ORIGINAL: gorilla


1. You mean a gorilla who's going to be 44 next birthday walks like frankenstein, and is trying to re-learn how not to, has regrown (YAY!*) his fur, is learning how to use his hands again and anyway is gearing up for our campaign over the next few months with speaking engagements and meetings in:

2. * - There are few sights more horrible than a furless gorilla, believe me I know!

quote:

Erin I'll take you up on that!

quote:

I really knew this one!

quote:

ORIGINAL: skip

c1sissy

quote:

I really knew this one!

do you have some info on this topic?