Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    9
    Thanks
    2
    Thanked 1 Time in 1 Post

    Question How do I create links which create menus to select other links?

    To clarify, I'm just wondering how I would create a link which, when the viewer highlights it with their mouse cursor, a menu pops up which will provide links to other parts of the page.

    I see examples of this on many pages and I think it is an excellent technique to provide links to other parts of a page which share a common theme,i.e :
    (Link #1 : Tools ----> Menu #1 : Hammers, Saws, Drills )

    In this example, when the viewer places their mouse cursor over the link "Tools", a menu appears which presents the additional links of "Hammers", "Saws", and "Drills".

    This is a great idea, since it would be bothersome to link to a "disambiguation" page and then have to choose from from the 3 tools available.

    So, coding crusaders, how do I add this neat feature to my website?

    David. -_-;

  • #2
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Here is a nifty script to do something lie you are describing.

    http://www.dynamicdrive.com/dynamici...menu/index.htm
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #3
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    9
    Thanks
    2
    Thanked 1 Time in 1 Post
    Hi Jeremy!
    You certainly are a helpful fellow! : )

    -----

    So neither html, nor CSS, can create this style of "navigation menu" I guess.

    I'm going to have jump to another level, and learn javascript and dhtml.

    man. coding is like taking a "mind-expanding" drug.
    level after level of complexity.

    ----

    I'm not trying to shirk the challenge, but, I'll just ask :
    I don't suppose there is a way to do what I want with basic html or css is there?

    I just need to know, so I can gird myself for the plunge into a new programming language and steel my mind against the embattlement to ensue.

    ----

    Thanks again Jeremy!

    David.

  • #4
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    9
    Thanks
    2
    Thanked 1 Time in 1 Post
    These two pages have the kind of menus that I want :

    www.webdevelopers.com
    and
    www.sitepal.com

    The menus that run horizontally near the top of the page, expand into additional links when highlighted.

    Perfect.

    Is it possible to do that with html or css?
    I'm guessing not.
    Which languages then?

    ----

    Hey Jeremy, if you feel that the link you provided me was the best answer, I'll take a deep breath and go in.

    Thanks,
    David.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yes its possible to do it with html and css. IE6 will have an issue but for that we use a sprinkle of javascript. Tutorial here. http://www.alistapart.com/articles/dropdowns/

    In the future search the forums as this has been asked many times.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Regular Coder
    Join Date
    May 2006
    Posts
    290
    Thanks
    6
    Thanked 14 Times in 14 Posts
    I don't recommend one that relies heavily on javascript. Simply because some users can and do disable java when browsing, making your menus obsolete.

    Here is one that relies strictly on css to work unless it detects IE6 or lower then it utilizes javascript to make IE6 or lower function properly.

    Here is the menu site. http://qrayg.com/learn/code/cssmenus/

    There is a horizontal and a vertical version. It can also handle limitless sub categories.

    Best of all its FREE.

    You can view how I modified it to work on my page here. http://harvestwhitecounty.com/

    hope that helps some.

    -trigger

  • Users who have thanked trigger_tre for this post:

    davidjuliowang (11-18-2007)

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by trigger_tre View Post
    I don't recommend one that relies heavily on javascript. Simply because some users can and do disable java when browsing, making your menus obsolete.

    Here is one that relies strictly on css to work unless it detects IE6 or lower then it utilizes javascript to make IE6 or lower function properly.

    Here is the menu site. http://qrayg.com/learn/code/cssmenus/

    There is a horizontal and a vertical version. It can also handle limitless sub categories.

    Best of all its FREE.

    You can view how I modified it to work on my page here. http://harvestwhitecounty.com/

    hope that helps some.

    -trigger
    Thats pretty much what I just posted. If you look at the yellow box on that site it says this
    Quote Originally Posted by qrayg.com
    Please be aware that this technique was not entirely created by me. I borrowed the ideas from the fantastic Suckerfish Dropdowns.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    davidjuliowang (11-18-2007)

  • #8
    Regular Coder
    Join Date
    May 2006
    Posts
    290
    Thanks
    6
    Thanked 14 Times in 14 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Thats pretty much what I just posted. If you look at the yellow box on that site it says this
    So all your saying is my suggestion is still different than yours? Did you even bother to look at the css code for the site I suggested? obviously not.

    You made a generalized good suggestion. I made one more specific good suggestion to someone who obviously is still a beginner css, html, java coder.

    Please be aware that this technique was not entirely created by me. I borrowed the ideas from the fantastic Suckerfish Dropdowns.
    Hmmm. I could be wrong but from this I gather that he MODIFIED the code. So basically its not the same suggestion you made because it has now been modified.

    To clarify, I'm just wondering how I would create a link which, when the viewer highlights it with their mouse cursor, a menu pops up which will provide links to other parts of the page.
    It is obvious that he has never ventured down this road before. I remember when I first started and came across the suckerfish dropdowns. It is so simplified that it actually lacks A LOT of necessary code for it to be cross-browser compliant.

    Someone like davidjuliowang who has never done this could easily find themselves in a pickle if they try to unknowingly mess with the code. Thus MY example actually inserts the proper code with some comments so that changes are a lot easier.

    With:

    suckerfish - you still have to fiddle with a lot of code, leading to errors and time spent testing.

    grayg - the fiddling has been done and tested, leading to less errors and easy implementation for beginners. All he has to do is copy and paste two files and link to them on is html pages, can't get much easier.

    -trigger

  • #9
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    9
    Thanks
    2
    Thanked 1 Time in 1 Post
    _Aerospace_Eng_ , trigger_tre , gentleman, my thanks.

    Success!!!!

    Both references were very helpful!

    I can't believe it was as simple as using the :hover pseudo-class.
    I used the :hover pseudo class to change the color of my links on my page.
    I never thought about using the :hover pseudo-class in conjunction with the {display : none} and {display: block} property.

    It's such a neat interweaving of functions which are supposedly supposed to only handle specific tasks, to do something remarkably unexpected.

    It's so marvelously simple, just tell the browser to hide the second-level of the link-set until the viewer hovers over the first-level, and, then, presto! out pops the second level!

    soipob! (some cartoon character says that. i can't remember which one...)

    The Javascript was a bit too heavy for me to digest, so I just copied and pasted.

    I did learn something in addition to the suckerfish technique.

    The following syntax :

    <link rel = "stylesheet" type = "text/javascript" href = "abcd.js" />

    does not work to link to an external javascript.
    I couldn't find how to link to an external javascript on the w3's tutorial, so I thought I'd just experiment.

    A little web surfing and I found the proper syntax.
    It was deceptively simple (that seems to be the theme with this little coding adventure) :

    <style type = "text/javascript" src = "abcd.js"> </script>

    Yet, at the same time, I could have scratched my head for hours and not have gotten it quite right.
    Changing "href" to "src"... How fiendish!
    Using the same format as an Internal Style Sheet. How diabolical!
    ah...programmers are truly denizens of digital torture.
    ...kidding of course. : )
    I know that finding a combination of logical symbols to represent the complexity of functions that a human being can conceptualize is a daunting task.
    Just look at Roman Numerals.
    They seem logical, but can't hold a candle to the Arabic system.
    no. not an easy task at all.
    css and html are quite easy to understand...after a good deal of practice of course.

    The javascript will take a while though.
    It's definitely a step up from html and css.

    I can't see it's value yet...
    The only reason I needed it this time was because Internet Explorer doesn't recognize the :hover pseudo-class.
    I looked into it a bit, and it certainly can do a lot!
    Something to aspire to.

    ---

    Well, gentleman, my thanks to you. <_ _> (bowing).

    David.

    P.S :
    In the future search the forums as this has been asked many times.
    I will ensure I do so in the future my friend.

    P.P.S :
    You can view how I modified it to work on my page here. http://harvestwhitecounty.com/
    I took a look at your site my friend.
    Very nice use of the suckerfish technique.

    I'm actually a Catholic myself (not practicing).
    I suppose I'm an atheist in truth, although, I wouldn't say so.
    I believe in myself.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •