Drop Down Menu CSS + JS DISAPPEARING-DELAY

Hi. I've recently made a 2 level-dropdown using CSS alone. This, as im sure you're aware, leaves me with the problem of the menu disappearing instantly when a user leaves the area with their pointer. I was wandering if anyone could write me a snippet of JS which lets the menu stay open for a couple seconds or whatever once the user leaves the area. Or perhaps you could link me to a page? I have tried searching for the answer - but i can't find anything which addresses me specifically - i have a CSS menu - but simply want to add a disappearing-delay.
Thanks for your time.
on a different point - what are people's opinions of including an automatic date on your site - advantage is giving the feeling of a well-kept, up-to-date site. Or are they a bit naff? i mean everyone knows the date or simply has it a click away somewhere on their OS UI.

Hi, CripA,
Can't answer the drop down (hopeful) lag question. You could try enlarging the area included in the link with display: block (it may already have that designation), so the cursor has farther to go before it 'leaves' the link...
On your question about date, The automatic date that I include is a "site revised" type of date. Unless I update it every day (not likely), it won't always show the current date, just the date of the last content/code update. So, my date would not give a false feeling of "a well kept, up to date site," unless I were to have it always show the current date. Here's my code:
<p>This page was updated <!-- #BeginDate format:Am1 -->August 5, 2009<!-- #EndDate --> </p>
If your site contains material that would make a difference to your viewers whether or not it were up-to-date, it's nice to reassure them. If the date is irrelevant to the content, not as useful.
Z

Similar Messages

  • Mobile drop down menu won't disappear once I have clicked one of the links in the drop down to take me to an anchor further down the page. I want the drop down to disappear upon clicking and scroll at the same time.

    Basically I have a drop down menu, which i have tried to create numerous times with different widgets available in muse or as freebies on the net.
    The menu within the drop down is a manual menu and each button links to an anchor on the page, so that when clicked the page scrolls to that anchor.
    My problems is that once I have clicked one of the links to go to the anchor further down the page the drop down remains. For the purpose of User Experience and fluidity across the mobile design i would like the drop down to disappear on click of the anchor link. Is this possible?
    Many thanks,
    Lew.

    Hi Brad,
    At the moment I have used an downloaded widget which utilises the acordian style to create the drop down. Here is a link to the Mobile version of the site - http://www.brainstormdesign.co.uk/phone/index.html
    Many thanks,
    Lew.

  • Drop down menu ("Notifications", "Alarm") Disappears!

    My z10 has been working beautifully.
    Except in the past few days whenever I make the drop down menu active (the one accessible by swiping from the top bezel downward), and try to click "Alarm" or "Notifications", the drop down menu swipes back up and disappears!
    In other words it seems like *just* those two buttons (Alarm and Notifications) are disabled, so the effect is the same as if I were to click the black backgroud of the drop down menu or anywhere else but an active button. Pressing the Alarm or Notifications buttons in all kinds of ways has the same effect -- the banner just thinks you want to get out of the menu and disappears.
    Any ideas why this is happening? Am I the only one?
    Solved!
    Go to Solution.

    Due to the age of this discussion it has been closed to new replies.
    If you have a similar issue or wish to discuss it please start a new post and link back to this
    Thank you for your participation on the BlackBerry Community Forums!
    Steve_T                                                                                                       New to the Community click here  
    Community Moderator

  • Drop down menu does not disappear

    I have created some multi-level Flash dropdown menus. I have
    made hot spots wherever the buttons are not that call an onRollOver
    event, making the menus disappear back up. The problem is when you
    move your mouse quickly over and off the button. It calls the drop
    down level, but it sticks because the mouse did not have a chance
    to hit the hotspots to close the menu.
    Is there any way to call a close of the dropdown level that
    is stuck with some actionscript?
    Maybe something along the lines of "if mouse is not in any of
    the on(rollOver) or on(rollOut) hot spots, then gotoandplay a
    certain frame?
    You can see example here...
    http://baysidesolutions.com/our_process.html
    Thank you!

    you need a loop to repeatedly check the mouse position or
    hitTest() with your dropdown. you should trash the buttons that
    work as hotspot detectors because it's a flawed solution.

  • Drop down menu in CSS

    After someone suggested the P7 link (
    http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm[i
    ), I was able to reverse engineer it and figure out how it works
    (obviously not a feat of genius, but I'm new at this). Anyway, I
    got it working, made some changes to and and had a functioning
    horizontal drop down menu bar to pop into my own site.
    So I renamed everything, linked the .js to the HTML page in
    the <head>, put the CSS into the attached style sheet, etc.
    Everything was going great until I previewed it and realized that
    the drop downs were happening behind the "bottom_half_wrapper"
    elements rather than on top of them all.
    So then I played with the z-index and put the nav bar on the
    2nd level. No dice.
    Also, you cannot scroll down the drop down menus without them
    disappearing.
    How should I be approaching this? I think that what is
    especially hindering me is my lack of javascript knowledge. I am
    under the gun at work and learning all of this on the fly. I have
    attached the relevent code, but cannot publish the site since I am
    at a large educational institution and do not have permission to
    publish it to our server yet.
    Thanks!

    I don't think there is a correct answer to your questions, just opinions and options that all have a place in design decisions.  Not all people will allow javascript or Flash content, so sticking with a CSS/html approach will help maximize the potential audience.  But CSS/html-only solutions can end up lacking interesting functional/interactive elements.  So the choice really comes down to using what works best to make the site performance what it needs to be.

  • Bookmark folder drop down menu disappears

    While using Firefox as of late, I've noticed a few things out of place.
    Firstly, while browsing the web I tend to store a lot of bookmarks; recently while attempting to store new bookmarks in folders on the bookmark toolbar, as I drag the page to be stored as a bookmark the folder's drop down menu disappears. It's still possible to drop the bookmark into the folder, which then in turn makes it fall to the bottom of the list automatically; however, there are organized folders inside of folders so it's rather counterproductive.
    The same thing happens when just clicking on a folder, the menu simply doesn't show up yet the "invisible" bookmarks may be interacted with by clicking on them -albeit randomly. After a few attempts, the menu will eventually appear but not always the first attempt. Quite frustrating.
    Also, the memory used by Firefox seems a bit high; especially when opening various new tabs.
    What should be done about this issue?

    (1) Find (or create) the chrome folder. This is a folder in your currently active Firefox settings folder, also known as your Firefox profile folder.
    Open the your profile folder using: Help > Troubleshooting Information
    Windows: Click the Show Folder button
    Mac: Click the Show in Finder button
    Check for a chrome folder.
    If it exists, double-click it to open it.
    If it does not exist, create a chrome folder, then double-click it to open it.
    (2) Create or Edit a userChrome.css file by adding a bookmark button rule.
    Check for a userChrome.css file in the chrome folder.
    If it exists, open it in a text editor and add the following lines, then save:
    /* Force bookmark drop-down button display even with classic menu bar */
    #bookmarks-menu-button {display:-moz-box !important}
    If it does not exist, right-click the following link > Save Link As, and save into your chrome folder (or save in Downloads and drag to your chrome folder): http://www.jeffersonscher.com/res/userChrome-bookmarksbutton.css.
    Then rename the file to userChrome.css.

  • Spry Drop down menu disappearing behind flash mov

    Hi Can someone help? I have a spry drop down menu that appears fine in IE but in firefox it disappears behind my flash movie! it appears fine if there is just a image. Any ideas?

    This is the wrong part of the forum for this type of problem, and it may be better if you post this type of question (or most questions), to the dreamweaver section.
    That said check your position: absolute: statments in your css, as this is often the cause.
    PZ

  • I have two faults! 1, an error comes up in Ps CC 2014 "could not apply the saved panel configuration, restring to default and my tools have disappeared completely and anything ive tried I cannot get them back not even the drop down menu in 'window' helps

    I have two faults! 1, an error comes up in Ps CC 2014 "could not apply the saved panel configuration, restring to default and my tools have disappeared completely and anything ive tried I cannot get them back not even the drop down menu in 'window' helps at all. And 2, Lr everytime I load it up it gives me the option to retry or switch to and it takes a while for me to even get anywhere with it I think it has something to do with the catalogs? I've been using these programs for a few years now on a Mac...no problem but when I use a PC when I'm away coz it's the (only) comp available these happen PC's are so useless! Please can anyone help??...

    I can give a few suggestions on Photoshop CC 2014, but Lightroom is a separate forum and you should ask Lr questions there.
    First close Photoshop.
    Then start Photoshop by double-clicking on it's icon and very quickly after that, hold down the ctrl-alt-shift keys until you see the reset dialog. answer "Yes" to delete settings, and let Photoshop continue to load.
    It's tricky to do and may take a few tries, but at least it should reset Photoshop CC 2014 to defaults.
    Gene

  • Help needed with CSS drop down menu

    Hi guys,
    I'm trying to build a drop down menu for my site but, despite seeing a few tutorials and examples, I've had no luck yet!
    I'm pretty sure my HTML is correct...
    Code:
        <ul id="nav">
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a>
                <ul>
                    <li><a href="#">Drop Down 1</a></li>
                    <li><a href="#">Drop Down 2</a></li>
                    <li><a href="#">Drop Down 3</a></li>
                    <li><a href="#">Drop Down 4</a></li>
                </ul>
            </li>
        <li><a href="#">Menu 4</a></li>
        <li><a href="#">Menu 5</a></li>
        </ul>
    My CSS looks like this at the moment...
    Code:
    ul#nav {width:920px; height:35px; list-style:none; padding:0; margin:0; background:url(navBg.jpg) repeat-x; font-family:'OpenSansRegular'; font-size:11px; font-weight:700; text-transform:uppercase; -moz-box-shadow:0px 0px 10px #1c1c1c; -webkit-box-shadow:0px 0px 10px #1c1c1c; box-shadow:0px 0px 10px #1c1c1c; z-index:999;}
    ul#nav li a:hover, #nav li a:active {background:url(navOn.jpg) repeat-x; text-decoration:none;}
    ul#nav li a {border-right:1px solid #000; color:#E0E2E7; display:inline-block; float:left; margin:0; padding:10px 19px; width:auto; text-decoration:none;}
    * html #nav li {display:inline; float:left; }  /* for IE 6 */
    * + html #nav li {display:inline; float:left; }  /* for IE 7 */
    ul#nav li ul {left:-9999px; position:absolute; list-style:none;}
    ul#nav li:hover ul {left:0; position:absolute;}
    ul#nav li ul li {}
    ul#nav li ul li a {width:230px; background-color:#efefef; color:#2e2e2e; font-family:Arial, Helvetica, sans-serif; font-size:10px; font-weight:normal; border-bottom:solid 1px #FFF; padding:7px; margin:0;}
    ul#nav li ul li a:hover {background-color:#028efd; background-image:none; color:#FFF;}
    I'm really struggling with this. Does anyone know how I can get Menu 3 to display the four drop down items beneath it - not the same width as the Menu 3 button but just inline with it.
    Thank you very much and I hope to hear from you.
    SM

    Try this. It's been adapted from a menu I previously made on another site.
    #menu {width:920px; height:35px; padding:0; margin:0; background:url(navBg.jpg) repeat-x; -moz-box-shadow:0px 0px 10px #1c1c1c; -webkit-box-shadow:0px 0px 10px #1c1c1c; box-shadow:0px 0px 10px #1c1c1c;}
    ul#nav a {font: 700 11px 'OpenSansRegular', arial, helvetica, sans-serif; text-transform:uppercase; margin:0; padding:5px 15px; line-height:25px; color: #666; text-decoration: none; display:block; list-style: none;}
    ul#nav a:hover, ul#nav a.active {color: #999; background:url(navOn.jpg) repeat-x; text-decoration:none;}
    ul#nav {position: relative; margin: 0; padding: 0;}
    ul#nav ul {display: none;}
    * html #nav li {display:block; float:left; }  /* for IE 6 */
    * + html #nav li {display:block; float:left; }  /* for IE 7 */
    ul#nav li, ul#nav li li {position: relative; float: left; list-style: none; border-right:1px solid #000;}
    ul#nav li:hover ul {position: absolute; top: 35px; left: -1px; display:block; padding: 0; margin: 0;}
    ul#nav li li {width:230px; background-color:#efefef; color:#000;  font: normal 10px 'OpenSansRegular', arial, helvetica, sans-serif; border-bottom:solid 1px #FFF; border-right:none; border-left:1px solid #000; padding:0 5px;}
    ul#nav li li:hover, ul#nav li li a:hover {background-color:#028efd; color:#FFF;}
    <body>
    <div id="menu">
    <ul id="nav">
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a>
                <ul>
                    <li><a href="#">Drop Down 1</a></li>
                    <li><a href="#">Drop Down 2</a></li>
                    <li><a href="#">Drop Down 3</a></li>
                    <li><a href="#">Drop Down 4</a></li>
                </ul>
            </li>
        <li><a href="#">Menu 4</a></li>
        <li><a href="#">Menu 5</a></li>
        </ul>
        </div>
    </body>

  • Need help fixing a CSS Drop-Down menu for IE6

    Hello.
    I have created an entirely CSS drop down menu for my website
    which works perfect in Firefox, Safari, Opera and IE7 however when
    I tested in IE6 it displayed like this -->
    image
    here or go to http://www.runecentral.net/index.php (Must have
    /index.php as i have redirected / to the community forum.)
    Here is my code

    Thank you for your reply.
    To answer your first question, I tried it with just one
    before and it caused Internet Explorer to display the background
    incorrectly so I just kept them both.
    I have replaced background-image with background:
    url(/img/defmenu.png) repeat-x;
    But, I cannot access my XP machine until tomorrow so I cannot
    view the site in IE6, if you could test it and tell me if it is the
    same as the image linked to in my first post that would be great.
    Kind Regards,
    Perry

  • CSS Style drop down menu (contribute 3.11)

    Hi,
    I am having a problem viewing any styles in the styles drop
    down menu at the top of my page when editing.
    I am the administrator of the site and I set up the options
    like this:
    Administrator settings > Styles and fonts >
    Document level CSS (pull down)
    First 3 checkboxes checked, and show only CSS styles included
    in this CSS file (browsed and selected a css file with a single
    style).
    Checked the remainding 3 checkboxes
    No matter what I do I have not been successful in ever seeing
    a style of my own within this list.
    I have tried...
    1) Not using a secure site
    2) Allowing a different user on a different PC to attempt to
    create a new page
    3) Locating the stylesheet in many different locations
    4) Hardcoding the styles into the template
    5) Show all styles (which wouldn't work anyway since the
    pages are PHP based)
    6) Banging head violently against wall.
    I should mention that I am using a PHP based template which
    works fine apart from this styles drop down menu.
    Please please please help (asap)!
    Thanks,
    Dan.

    dotcom012 wrote:
    > I have a web site that uses a javascript and a style
    script to
    > control some drop down menus at the top, each page has
    to have this
    > in the <head> area. Is there a way to make say a
    CSS so that i can
    > say update that one page if say a link needs to be
    changed or added
    > so i don't have to go to each of the 120 pages to change
    the menu! So
    > far right now, i have to go to each page, go into the
    javascript code
    > and update the link or whatever. Is there an easier way?
    You may want to read this article, it shows how to use
    external files (CSS,
    SS-Includes, JS, etc):
    http://www.tjkdesign.com/articles/maintenance.asp
    HTH,
    Thierry
    Articles and Tutorials:
    http://www.TJKDesign.com/go/?0
    The perfect FAQ page:
    http://www.TJKDesign.com/go/?9
    CSS-P Templates:
    http://www.TJKDesign.com/go/?1
    CSS Tab Menu:
    http://www.TJKDesign.com/go/?3

  • Seeking: Drop Down Menu Tutorial for DreamWeaver CC (Pure CSS)

    Hey all.
    I'm relatively new to Dreamweaver, and web design in general.  I took on a project to create a small-business website for my buddy.
    I'll start by saying that I've googled, and have found several copy / paste solutions, as well as several plugin-style solutions.  For various reasons, I'm not interested in other methods of creating a menu (jQuery).  Project 7, before you post (like you seem to do in EVERY thread I've read about this topic...), I may purchase your tool later, but I want to learn the process first.
    I'd like to know if anyone knows of a video or a walkthrough of how to create a CSS-only drop down menu for DreamWeaver CC.  An in-depth tutorial will help me better understand CSS and HTML in general, as well as help me navigate the changes in DreamWeaver (namely, the CSS designer).
    Any ideas?

    http://www.w3schools.com/css/css_navbar.asp
    http://cssmenumaker.com/blog/tutorials
    http://www.siteground.com/tutorials/menu/css.htm
    http://ntt.cc/2010/11/24/30-pure-css-menu-tutorials-for-web-developers.html
    Try one of these sites, should have what your are looking for.

  • "undefined" appearing next to text in CSS Drop-Down menu, why?

    Hello everyone,
    I am having a problem with a CSS drop-down menu. The menu works fine, as you can see here:
    http://littlebuddymedia.com/help/011.html
    But the text "undefined" appears next to the main menu options. My question is, why?
    I have narrowed the problem down to this chunk of code:
    <div class="chromestyle" id="chromemenu">
    <ul>
    <li><a href="http://www.dynamicdrive.com">Home</a></li>
    <li><a href="#" rel="dropmenu1">Resources</a></li>
    <li><a href="#" rel="dropmenu2">News</a></li>
    <li><a href="#" rel="dropmenu3">Search</a></li>   
    </ul>
    </div>
    If you remove the rel="dropmenu1" portion of the code, the word "undefine" no longer appears, but then the menu doesnt drop-down anymore.
    Any ideas?
    If it is needed:
    Here is the CSS file: http://littlebuddymedia.com/help/chrometheme/chromestyle.css
    Here is the JS file:http://littlebuddymedia.com/help/chromejs/chrome.js
    Thank you.

    When I use FF to view the generated source, I see this -
    <li><a href="#" rel="dropmenu1">Resources undefined</a></li>
    <li><a href="#" rel="dropmenu2">News undefined</a></li>
    <li><a href="#" rel="dropmenu3">Search undefined</a></li>
    The undefined is coming from the javascript functions that you have loaded in that external file.  This function call is what starts it -
    <script type="text/javascript">
    cssdropdown.startchrome("chromemenu")
    </script>
    If you want 100% reliable drop menus that have been exhaustively tested in all common browsers/platforms, check the ones available from http://www.projectseven.com.

  • Drop Down Menu Using CSS Only

    Apex 3.2
    I have created a drop down menu for my application by following this blog
    http://www.grassroots-oracle.com/2013/05/css-pull-down-menu-using-apex-list.html
    It works perfectly if my list has only one level, but I can't get it working for sub items.
    If I add a sub item to my list, then the whole menu displays incorrectly.
    Has anybody used this blog before
    I would post on the blog, but it requires a google acount, which I am not allowed to create
    Gus

    Hi Gus,
    Have you read the comment from ino?
    Thanks Scott, very useful.
    One update: this works if there are no sub menus. For the same reason as you described about the <ul> bug, you can change the Sublist with sublist items to
    <li><a href="#LINK#" class="dir">#TEXT#</a><ul>
    (extra <ul> at the end). Took me a while to figure out why my sub menus were not showing properly, until I read your comment in the "Sublist template before rows" section.
    It looks to me that this would solve your problem.
    Regards,
    Kees Vlek
    Company: http://www.orcado.nl
    Blog: http://www.orcado.nl/blog/blogger/listings/69-kvlek
    Twitter: http://www.twitter.com/skier66
    +If the question is answered please change it to answered and mark the appropriate post as correct/helpfull.+

  • CSS Drop Down Menu Problem (only in IE)

    Hi Folks,
    I have just added a new drop down menu and it seems to work perfectly in every other browser except IE.
    In IE the cursor makes the next menu item along drop down and not the one that's hovered over.
    I have removed the jquery script and the same problem occurs, so I reckon it must be a CSS problem. Here's the CSS code in case anyone has any ideas what the problem is.
    Any suggestions would be hugely appreciated cos I can't figure it out .
    Cheers
    Dave
    /*Navigation Menu Style*/
    #topmenu{
    #topmenu #nav, #nav ul{
    font-size:10.5px;
    font-weight:bold;
    margin:0;
    list-style-type:none;
    list-style-positionutside;
    position:relative;
    line-height:35px;
    background-color:#006699;
    width:100%;
    text-align:left;
    #topmenu #nav a{
    display:block;
    padding:0px 5px 0px 10px;
    width:145px;
    border-left-color:#006699;
    background-color:#006699;
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    #topmenu #nav a:hover{
    color:#CFF;
    #topmenu #nav li{
    float:left;
    position:relative;
    #topmenu #nav ul {
    position:absolute;
    display:none;
    width:160px;
    top:35px;
    #topmenu #nav li ul{
    /*padding-bottom:20px;*/
    #topmenu #nav li ul a{
    width:180px;
    height:35px;
    float:left;
    text-transform:capitalize;
    #topmenu #nav li ul a:hover{
    text-decoration:underline;
    #topmenu #nav ul ul{
    top:auto;
    #topmenu #nav li ul ul {
    left:180px;
    margin:0px 0px 0px 10px;
    #topmenu #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    #topmenu #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    /*Navigation Menu Style Ends */

    I think that is fine but it did get converted to a smiley face you are right. This is how it looks
    #topmenu #nav, #nav ul{
    font-size:10.5px;
    font-weight:bold;
    margin:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    line-height:35px;
    background-color:#006699;
    width:100%;
    text-align:left;
    it's all on a local set up right non but I will try to pop it up and post a link.
    The symptoms are easy to describe though. When you hover over a top level menu item, the list drops down under the link directly to the right.The positioning isn't random, it is exactly in line, just under the wrong heading.
    In every other browser it seems to be fine.

Maybe you are looking for

  • Switching to a MacBook from a PC. Is this the right one for me?

    I currently have an IPhone and IPad  and am looking to purchase a MacBook to complete my Apple experience!   I have always been a PC user and will continue to use one at work, but am ready to transition to a Mac for my personal use.  I currently have

  • Oracle import query

    Hi All, Just a query, Can I take export of oracle 9.2 db and import into 8.0.6 database. ? Currently I am getting Connected to: Oracle8 Enterprise Edition Release 8.0.6.0.0 - Production With the Partitioning and Objects options PL/SQL Release 8.0.6.0

  • Select statement as function parameter

    Hi everyone, hopefully this is a quick yes or no. I'm getting an annoying error in toad with a statement, basically I want to call a function with a select statement as a parameter. my_function((select name from people)), 1, 10, xx) Can I use a selec

  • Copying Certain document types only from project to Solution Directory

    Hello,    We are in the process of setting up Solution Directory in Solution Manager 4.0 sp12. After creating a solution we'd like to add scenarios from multiple implementation as well as template projects based on the document type. We have several

  • Publishing test site to browser

    When I publish the test site to the bowser per the tutorial instructions, why do I not see the top navigation tabs as shown on the tuitorial screen?