Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Unodered lists - Dropdown Menus 2

Status
Not open for further replies.
Dragonfish

Dragonfish

Programmer
Apr 25, 2001
62
UG
Hi Everyone,

I read the following articale about dropdown menus and it changed my perspective. The only trouble was - when I tried it - it didn't work. I know I'm going to have to dig into this subject a lot deeper but right now I would appreciate some help. This is what I wrote to Nick Rigby (who wrote the article) but I haven't had a reply so if anyone can help out - would be much appreciated...

Dear Nick,

I hope you don't mind me bothering you about the article you wrote in If you do - just tell me RTFM and I won't take it personally.

I loved your article in In short - I'm converted. Like many people I have up till now written meuns using tables and I didn't have a clue how to write drop down menus. I've searched the web for some javascript code, but it always confused the hell out of me. I am not really a programmer (lack of intelligence).

Generally I understood what you were doing and I also backtracked to Patrick Griffiths's Suckerfish Dropdowns to try and get a better understanding of the detail - and failed !!!

My problem is that I am running a company in Uganda (just started up) and I just don't have time to immerse myself in the nuts & bolts of the whole thing and the guys who write the website stuff actually have less idea than I do. Basically my problems are as follows:-

- I didn't understand how you were accessing the css code. Up till now I've done it like this - in a separate css-file
. name-something { background-color: #9F9F9F; etc }

and invoked it in the document with something like
<p class="name-something">some text</p> and that has worked fine

I'm assuming that
ul li a {
goes into the css file just like that - but how do I call it in the HTML code - and where (I'm showing my ignorance I know). And can't I rename ul li a { to something else or is that a convention ???

Also I didn't understand this. Actually I don't know what it is (not javascript ???) and where to put it and how ???
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

I have a file for anything to do with javascript that I call main.js and I use it like this...
<SCRIPT language="JavaScript" src="./javascriptfiles/main.js" type="text/javascript"> <BODY onLoad="some-function()">

But I didn't understand how to load startList = function() { Why not just startList() ???

I would really would have appreciated the final html code - I think then I would have understood a few things about which I'm asking questions now. I usually don't like spoon feeding people and I'll bet you don't either but your article was a revelation - I'm just not proficient to use it (but I really would like to !!!). Some of your readers are not as intelligent as you give them credit for...

Thanks for the help


----------------------------------------------------------
Meddle not in the affarirs of Dragons
for you are chrunchy and good with Mustard
----------------------------------------------------------
 
Sort by date Sort by votes
You don't nee any specific access, that's the beauty of CSS. it targets elements as well as class names.

As per your example:
Code: 
ul li a {

This is targeting a link that is inside a list item that is inside an unordered list, so basically this would automatically apply to

Code: 
<ul>
<li><a href="#">This is a Link</a></li>
</ul>

No classes involved, only elements.

And this:
Code: 
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

This is still CSS, its just applying to the elements so the menu works in IE for MAC, which at this point in time is hardly necessary, as its no longer supported by MS, and almost 99% of people who have a Mac use either Safari, or Firefox for Mac.


Here's my take on drop down menus if you need, and refer to my blog for explanations on the code if you want other methods.
Its using the same basic unordered list technique.
Also no JS needed. For iPhone, iPad, and iPod support a single line of JS may be required.

There area few examples of other things using the hover pseudo class as well.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Thanks for the help Phil AKA Vacunita and thanks for the links. I've checked them out and am slowly getting my head around this stuff. Oh by the way, you might like to check out this site...


and if you know how he did that lovely - and I've been told it was only css & "perhaps" jquery. But if I'm asking too much feel free to tell me to get lost.

Much appreciated
Dragonfish

----------------------------------------------------------
Meddle not in the affarirs of Dragons
for you are chrunchy and good with Mustard
----------------------------------------------------------
 
Upvote 0 Downvote
The sliding images are done using a jquery and JS. the crosslide library.

I hadn't encountered it before, and haven't had time to fully look into the code, which you can see here:


Since its free, you can go ahead and use it.

The list.js file sets up the images to use and how they
should be moving.







----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
I am blown away - thanks - I will have to strech my brain a bit now. Hope the link was useful to you too.

Thanks
Dragonfish

----------------------------------------------------------
Meddle not in the affarirs of Dragons
for you are chrunchy and good with Mustard
----------------------------------------------------------
 
Upvote 0 Downvote
Have just visited the CrossSlide site. I think all my questions have been answered. I can't thank both of you enough. This kind of help is what makes tek-tips a great place to be.

Just hoping that I can give back at some time in same messure.

Dragonfish

----------------------------------------------------------
Meddle not in the affarirs of Dragons
for you are chrunchy and good with Mustard
----------------------------------------------------------
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Katerine
  • Locked
  • Question
CSS question: Displaying 2-level unordered lists in a table layout? 1
Replies
7
Views
161
Katerine
Katerine
c0deM0nK424
  • Locked
  • Question
Help with modifying current navigation menu to add 'drop down' sub-menus ? 1
Replies
5
Views
130
navyfalcon
navyfalcon
Mfho1
  • Locked
  • Question
Best Practices for Creating Menus - How to Retain Your CSS Menu Structure even with Javascript
Replies
13
Views
171
Mfho1
Mfho1
GD03
  • Locked
  • Question
CSS Dropdown Menu Alignment Problem with only IE7 and below 1
Replies
15
Views
199
feherke
feherke
mander23
  • Locked
  • Question
css main menu with lists
Replies
1
Views
68
TheCandyman
TheCandyman

Part and Inventory Search

Sponsor

Back
Top