|
CSS - Popup Menu Issue
Hi all,
Thanks for the interest, I want to set my menus like the categories in alibaba.com ( the menu of the left side), on mouse over the sub menus should come up in the same way as here. How can I achieve this ? Thank you guys Similar TutorialsHi, I'm still relatively new to CSS and liquid layouts, so please bear with me. I've made a new layout using only CSS over he http://www.abhiram.astahost.com/trialcss/index.html and the CSS file is: http://www.abhiram.astahost.com/trialcss/mystyle.css Now, when I move the mouse over one of the menu buttons, there should be a popup text that appears below the the button. The problem is, I don't want the button size to increase when you move the mouse over it. This is happening because I've had to use 'position:relative'. Also, I don't want the 'content' and 'rightbar' regions moving down when you mouse over it. I've designed this in 1024x768 res. Any ideas? One way of doing it would be to use absolute positioning, but I want the text to appear below each button. Thanks a lot. I've been fighting with CSS popup menus for a while now, and finally got everything looking ... close enough ... in every browser at my disposal (even IE). Now, I've started filling my page with content and all hell's breaking loose again. *sigh* For some background info, this page has a menu at the top, and the content area directly below it. In the content area, I have two divs that generate what's supposed to look like a dialog window. The titlebar div has class "title", the main window area div, class "window" and ID'd "dlg1". The idea being that the "title" div can be clicked to make the "window" div display: none and fold up in a window-shade fashion via a JavaScript function. The script works flawlessly, astonishingly enough, and can be used so that several "dialogs" can exist on the page, independently expandable just by giving them different IDs. Now for the details: The menu is a CSS UL -> LI:hover -> UL { display: block } sort (with a cheat script to make IE a little less retarded.) I've set the z-index of the submenu UL to 1000, hoping nothing in the Z-stack would have a higher display precedence than THAT. Firefox displays everything perfectly. The menus stay on top, the scripts work, life is good. Opera 7 works pretty much the same way. The rollover effects are kind of slow, at least in the Linux version, but no big deal. KDE's Konqueror 3.3.1 has no problem with the title and window divs, but always hides the menu under the <textarea> form element inside the window div. This is not acceptable, but since I will be probably the only one who will use this page in KDE, I can even live with that. MSIE... god bless it... it can't help itself. The menu will draw over the title div, but not the window div. So: 1) Regarding Konqueror's problem, the CSS-over-Flash post below suggests that some elements are too specialized to expect reliable z-index support. Am I to understand that my <textarea> tag will probably never sit correctly in the Z-stack unless the user agent draws them from scratch (like Firefox and Opera seem to do)? ..and, most importantly... 2) Is there ANY reason anyone can see why my menu is weaving behind those divs in IE? Here is a link to all of my content. (It's seperated into a few files to ensure efficient use of the cache, and to make changes easier.) Main CSS file (holds common properties to all pages, regardless of content. Controls the menu, for example.) http://www.mtaonline.net/~nwallette/test/ttmsmain.css Secondary CSS file (holds properties common to all pages that use the window architecture described above.) http://www.mtaonline.net/~nwallette/test/ttmsdlg.css Main JavaScript file (holds code to activate the window-shade function, and some other stuff yet to come.) http://www.mtaonline.net/~nwallette/test/ttmsmain.js MSIE patch JavaScript file (called in an IE conditional statement to fix support for :hover over LI's.) http://www.mtaonline.net/~nwallette/test/stupidie.js ...and finally, the HTML that illustrates the problems. http://www.mtaonline.net/~nwallette/test/argh.html To see what I mean, you'll need to make sure the two "dialogs" are expanded (click on the title bars) and then hover over the Admin menu. Make sure your window size is small enough so the Admin menu dropdown covers part of the dialogs below it. To see the Konqueror problem, contract the first dialog and make sure the 2nd one is expanded, and the Admin menu covers part of the multi-line text box. Any ideas, anyone? Please?? Dear clever CSSers I am currently changing my flyout menu from something rather complex, to the Suckerfish version. I have one problem: I have been using some mouseover tooltip-like information boxes giving extra details of the contents of a link, by having a div within the text of the hyperlink, to come visible when hovered. It has worked very well in my old version. Here's my test page In the new version, there are two lines of CSS allowing the popup to open, which is also enclosed in a balloon-style info graphic, actually in two halves so that it can open like a clamshell if there is extra text in there, or a user has a larger than normal font setting: Code: #nav a span {visibility:hidden;position:absolute;top:-120px;left:175px;background: url(http://www.internetevangelismday.com/images/balloontop.png) no-repeat transparent top left;width:196px;height:105px;line-height:1.2em;text-align:left;word-wrap:break-word;text-wrap:normal;white-space:normal;padding:0px;} #nav a:hover span {visibility:visible;z-index:9999;min-height:130px;}
This CSS does allow the popup to appear, but unfortunately it positions each popup at the same position on the page. I would prefer it that they appeared with the 'point' of the balloon pointing at the relavent link. You can see that if you hover '2nd level here', and then 'page 1', or 'page 2' or 'another page', the info balloon appears in exactly the same place on the page. Changing the positioning from position absolute to position relative causes the popup to appear in about the correct position, but it also expands the link area on the menu itself to a huge blank area and misses off the balloontop.png graphic from the popup, which I presume is staying inserted, hidden, within the menu item and causing it to expand. Thanks for any ideas on this. BTW, the javascript is a neat one that repositions submenus where necessary so they can't vanish below the bottom of the page. Best wishes Tony Hi, new here, and to CSS. I have read several of the posts regarding menu problems, but could not find one similar to my problem. Here is my development site, the code should be accessible (or I could post it if you prefer): PaHiker.com It works with all of the browsers except IE (of course). If you move the cursor over Chapters the secondary menu opens up below Chapters (which is what I want) and you can click on the item. In IE the secondary menu opens up, but as soon as the cursor is moved off of the primary item the secondary menu closes. Any help would be appreciated. Thanks, Mike Please Delete Hi I have modified a menu that used tables to now use CSS, it works fine but I can't get the layout to work (I'm learning). Each button has it's own div. I need the menu to go horizontally, not vertically, can anyone help please? jinx-inc.co.uk/development/menu.html Css - jinx-inc.co.uk/development/css.txt Html - jinx-inc.co.uk/development/html.txt I'm happy to provide whatever's needed if someone requires it to help! Thanks Everything works perfect expect one thing. When a mouse hovered on a link, dropdown links appear. Problem here is when I move my mouse towards the new links, they disappear before I reach them. Did I explain the problem well? No. Try the link. Menu at the top here. http://www.refinethetaste.com/html/ Code:
<style type="text/css">
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/elegant1.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#navigation { float:left; height:26px; width:776px; background:url(http://www.refinethetaste.com/html/THEMES/default/images/bg_mainmenu_off.gif);
}
#navigation .menu {padding:0; margin:0; list-style:none; font-size:16px;}
#navigation .menu table {border-collapse:collapse; height:0; width:0; margin:0 -4px -1px 0;}
#navigation .menu li {float:left; margin:0 5px;}
#navigation .menu li a {display:block; float:left; color:#FFFFFF; height:26px; text-decoration:none;}
#navigation .menu li a.current {font-weight:bold; border-bottom:3px solid #9d0808; cursor:text;}
#navigation .menu li:hover {position:relative; z-index:100;}
#navigation .menu li a:hover {position:relative; z-index:100; border-bottom:3px solid #aaa;}
#navigation .menu ul {position:absolute; left:-9999px; top:38px; width:140px; padding:0; margin:0; list-style:none;}
#navigation .menu ul li {margin:0;}
#navigation .menu ul li a {width:140px; height:20px; color: #000000; font-size:14px; border:0; text-align:right;}
#navigation .menu ul li a:hover { border:0;}
#navigation .menu ul ul {position:absolute; margin-left:100%; top:0; padding:0; margin:0; list-style:none;}
#navigation .menu :hover ul {right:0; left:auto;}
#navigation .menu :hover ul ul {left:-9999px; width:130px; padding-left:10px; }
#navigation .menu li ul :hover ul {left: 140px; height:20px; right:auto;}
#navigation .menu li ul li ul li a { color:#000000; font-size:12px; text-align:left; }
</style>
Hi! Could you please help me to fix my menu in IE7. You can see the problem on my site. But actually I don't know how to add an url he The code is: padding:0; } #menu ul#layer1 li { background:transparent url(/site_media/images/left.png) no-repeat scroll left top; float:left; margin-left:6px; padding-bottom:6px; padding-left:6px; padding-top:4px; } #menu ul#layer1 li span { background:transparent url(/site_media/images/right.jpg) no-repeat scroll right top; margin-right:6px; padding-bottom:6px; padding-right:6px; padding-top:4px; } #menu li a { background-color:#BF1E2D; color:#FFFFFF; padding:4px 35px 6px; text-decoration:none; } #menu ul#layer1 li#current span { background:transparent url(/site_media/images/right-gray.png) no-repeat scroll right top; } #menu ul#layer1 li#current { background:transparent url(/site_media/images/left-gray.png) no-repeat scroll left top; } #menu ul#layer1 li#current a { background-color:#E3E3E3; color:#BF1E2D; } I'm working with a superfish menu. I re-colored the images and replaced them with the old images in the css. For some reason, the menu-btn_rtur is not showing up. I want it there when the menu is inactive, like you see right when you go to the home page. At some obvious points, it will need the sub indicator arrow. My client wants to launch today, so I'm really under the gun and need help-- eternally grateful to anyone who responds. Smile Site Link:staging.phantasea.net/cpi/ CSS I added: Code: #navigation-menu ul.sf-menu > li > a {
background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-btn_rtur.png) top right no-repeat;
display: block;
padding: 0 20px 0 0;
color: #ffffff;
text-decoration: none;
border:0 none;
cursor: pointer;
}
#navigation-menu ul.sf-menu > li > a > span {
background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-active-btn_ltur.png) top left no-repeat;
display: block;
padding: 10px 0 10px 20px;
color:#FFF;
line-height:22px;
}
#navigation-menu ul.sf-menu > li > a.sf-with-ul {
background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-with-arrow-btn_rtur.png) top right no-repeat;
padding: 0 26px 0 0;
}
#navigation-menu ul.sf-menu > li > a > span.sf-sub-indicator { /* give all except IE6 the correct values */
background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-active-with-arrow-btn_rtur.png) top right no-repeat;
padding: 10px 0 10px 0;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a.sf-with-ul,
#navigation-menu ul.sf-menu > li.current_page_item > a.sf-with-ul {
background: url(../images/menu-active-with-arrow-btn_rtur.png) top right no-repeat;
}
ORIGINAL CSS: Code: /* Begin Main Navigation Menu */
#navigation-menu {
position:absolute;
right:20px;
top:5px;
font-size:14px;
height:40px;
}
.navigation-menu {
position:relative;
z-index:22;
}
#main-menu {
background: url(../../common-images/main-menu-btm-border.png) repeat-x scroll 50% 100% transparent;
width: 100%;
position:relative;
z-index:101;
height:56px;
margin-bottom:-6px;
}
#dropdown-holder {
display: block;
position:relative;
}
#navigation-menu > ul {
padding-top: 7px;
}
#navigation-menu > * {
padding:0;
margin:0;
font-size: 1em;
}
#navigation-menu ul.sf-menu {
padding: 10px 0 0 0;
}
#navigation-menu ul.sf-menu > li {
background:none;
list-style: none;
float: left;
margin: 0 0 0 -3px;
}
#navigation-menu ul.sf-menu a.default-cursor {
cursor: default;
}
#navigation-menu ul.sf-menu > li > a {
background: url(../images/menu-btn_r.png) top right no-repeat;
display: block;
padding: 0 20px 0 0;
color: #E8E8E8;
text-decoration: none;
border:0 none;
cursor: pointer;
}
#navigation-menu ul.sf-menu a {
line-height: 1.2em;
padding:8px 16px;
}
#navigation-menu ul.sf-menu a > span.sf-sub-indicator {
top: 17px !important;
}
#navigation-menu ul.sf-menu ul a > span.sf-sub-indicator {
top: 0.9em !important;
}
#navigation-menu ul.sf-menu > li > a > span {
background: url(../images/menu-btn_l.png) top left no-repeat;
display: block;
padding: 10px 0 10px 20px;
color:#FFF;
line-height:22px;
}
#navigation-menu ul.sf-menu > li {
margin: 0 0 0 -3px;
}
#navigation-menu ul.sf-menu > li > a.sf-with-ul {
background: url(../images/menu-with-arrow-btn_r.png) top right no-repeat;
padding: 0 26px 0 0;
}
#navigation-menu ul.sf-menu > li > a.sf-with-ul:hover {
background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
padding: 0 26px 0 0;
}
#navigation-menu ul.sf-menu > li > a > span.sf-sub-indicator { /* give all except IE6 the correct values */
background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
padding: 10px 0 10px 0;
}
#navigation-menu ul.sf-menu > li > a:hover {
background: url(../images/menu-active-btn_r.png) top right no-repeat;
color: #FFF;
text-decoration: none;
}
#navigation-menu ul.sf-menu > li > a:hover span {
background: url(../images/menu-active-btn_l.png) top left no-repeat;
color: #555;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a,
#navigation-menu ul.sf-menu > li.current_page_item > a {
background: url(../images/menu-active-btn_r.png) top right no-repeat;
color: #6A6A6A;
text-decoration: none;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a > span,
#navigation-menu ul.sf-menu > li.current_page_item > a > span {
background: url(../images/menu-active-btn_l.png) top left no-repeat;
color: #00717D;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a > span:hover,
#navigation-menu ul.sf-menu > li.current_page_item > a > span:hover {
background: url(../images/menu-active-btn_l.png) top left no-repeat;
color: #555;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a.sf-with-ul,
#navigation-menu ul.sf-menu > li.current_page_item > a.sf-with-ul {
background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
}
/* End Main Navigation Menu */
http://www.yentiming.com/ just play around with the menu on IE7 and you will see what will happen. i have tried messing around with z-index but i have found no success any ideas on how to fix this? Hi, My sub sub-menu won't work properly in IE regardless of version, but in FF and Chrome it's good to go. Basically, the sub sub-menu is covered up by the sub-menu. The sub sub-menu also appears when rolling over the main menu option, Resources, but it's blank. Weird stuff here. Here's a link: http://loganrealtyinc.com/ You can see what I'm talking about by mousing over: Resources > Things to Do See how the sub sub-menu options, thus Things to Do covers up Norton Museum and so forth? Any ideas? As always, thanks in advance. Hello, I'm building a portfolio for a close friend of mine and I REALLY can't seem to figure out this navigation menu she wants me to make. I have the menu in place but the drop down is both WAY too far to the right and UNDER the slideshow. Could anyone kindly show me how to get that stupid thing to appear UNDER the 'Galleries' section and ABOVE the slideshow? http://saranicolephotography.com/ Thanks! Hey everyone, The page below displays perfectly in both IE6 and Firefox, but in IE7 my navigation disappears and the right navigation in the header is all crunched together. livedifference dot com slash test slash home I'm not really a CSS guru, but I've tried clearing floats via tons of methods and adding random things, but nothing seems to work. Any help would be GREATLY appreciated, I really need to get this up and running. Thanks, Brad Can somebody please look at the following drop-down menu and tell me why it breaks in IE...it works fine in Mozilla/FF... In IE, the problem is that the sub-menus do not completely appear in front of their parent menus...they should be on top of their parent menus...like i said, it works in FF, so you can switch bewteen browsers to see the difference.... Thanks for any help. __________________ R.J. www.mediamogulsweb.com http://www.freewebs.com/dmorand/NMI%20Web.htm That's what I've done so far, but the drop-down menu isn't displaying in IE, but it does in Firefox. Anyone have any ideas? Also, in Firefox I see a couple of dashes in the top left corner, that I don't see in IE. Ok, I'm using wordpress theme SLR Lounge V2, and am trying to modify it to suit my needs. The problem I'm having is with my navigation's drop down menu. I'm currently using a custom menu (wordpress functionality, not theme). Initially, there was no background behind the drop down at all (so you couldn't really read it), which I've managed to modify to get the colour I want, however, I don't want the gaps, and I want it all to line up flush on the right hand side. Here's a screenshot of what I'm talking about: http://i.imgur.com/uSn1i.jpg I've played with padding etc to no avail. Also, sometimes the navigation elements end up paired beside each other instead of a straight vertical list if I play with the padding. Here is the css I have relating to the drop down navigation: Code:
/* Start Menu Items */
#menu {
list-style:none;
margin:0;
padding:0;
width:1000px;
height:100%;
border:none;
}
#menu:after {
content:'';
display:block;
clear:both;
}
#menu li.hover a,#menu li:hover a,#menu li.hover,#menu li:hover {
position: relative;
}
#menu li.hover ul, #menu li:hover ul {
display: block;
}
/*start drop-down menus on the top menu*/
#menu ul {
padding:0;
margin:0 0 0 -10px;
list-style:none;
width:108px;
display: none; /*******if you delete this, your drop down menu will appear randomly on the page somewhere **/
position: absolute;
}
#menu ul li a { /*This is the drop down stufff */
text-align:left;
float:right;
Hi guys I am trying to place a top menu on the side of my site, I can't seem to get the rollover to work. This is what I have on my css. Thanks in advance #topmenu ul { list-style: none; margin: 20px; padding: 0; } #topicons { width: 76px; position: absolute; left: 800px; background: url(../images/top-icons.gif); margin: 0px; padding: 50px; height: 146px; } #topicons li { list-style-type:none; margin: 0; } #topicons li a { background-image:url('../images/top-icons.gif'); background-repeat:no-repeat; margin: 0; padding: 0; display: block; height: 44px; text-indent: -9999px; overflow: hidden; } #topicons li a.item1 {background-position:0px 0px;} #topicons li a:hover.item1 {background-position:0px -49px;} #topicons li a.item2 {background-position:0px -90px;} #topicons li a:hover.item2 {background-position:0px -144px;} #topicons li a.item3 {background-position:0px -188px;} #topicons li a:hover.item3 {background-position:0px -280px;} Hello, I currently have a site (left aligned) that has its own Javascript pulldown menu. Its is pretty standard with the sub-menu's being in their own layer and are shown on mouseover. My problem is that these sub-menus are currently set at an absolute left position (CSS) but, if centered, will appear in different places at different resolutions. Does anyone know if its possible to anchor a layer to a point from something on a different z-index? I did a search on the forums here and found a similar question but no responses. Thanks guys! Well, i'm designing a website for myself and i've run into a setback(i'm totally new to web design) with the navigation and how it appears in firefox. Heres how it displays in IE, and firefox.(well my url has been blocked so showing a picture may not be possible) I'd like it to appear in firefox the same as IE.. Heres the html code: Quote: <div id="Navigation"> <ul> <li><a href="main.htm"><b>Homepage</b></a></li> <li><a href="home.html">About Me</a></li> <li><a href="home.html">My Interests</a></li><br> <li><a href="home.html">Cool Sites</a></li> <li><a href="home.html">My Opinions</a></li> </ul> </div> Css code thats formatting the <div> and its contents. Quote: #Navigation { width: 9em; border-left: 3px #000000 solid; padding: 0 0 1px 0; magin-bottom: 2px black; font-family: Verdana; background-color: #202020; color: #4b225b; text-align:c enter; font-size: 10pt; font-weight: normal; } #Navigation ul { list-style: none; margin: 0; padding: 0; border: none; } #Navigation li { border-bottom: 1px solid #202020; margin: 0; } #Navigation li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px #202020 solid; background-color: navy; color: #ffffff; text-decoration: none; width: 100%; } #Navigation li a:hover { border-left: 10px solid black; background-color: black; color: #white; } I wonder if its possible to help me find the cause of the issue as i'd prefer that it appear the same in both IE and Firefox >.> Thank you for your help |
|||||||