|
CSS - Custom Pop Up Menus Css Driven Vs Javascript
Hello there
I would like to ask you a question concerning pop up menus. It turns out that I have seen some techniques which use just CSS. Nevertheless, what I usually see is techniques that use javascript to achieve this pop up menus. It seems to me that javascript might be a more simple and straightforward technique for this purpose although I do not know because I have not implemented neither of them yet. Since I want to build a pop up menu, I would like to hear your suggestions in terms of advantages and disadvantages of css driven pop up menus against javascript menus. As far as I know, javascript is a disadvantage because it might not work sometimes when it is disabled in the browser. But, tell me your point of view, because I am sure you have lot to say about this. Another thing that I would like to do is defining myself the shape and colors of this pop up menus so please, you can bear in mind this point for any suggestion concerning the previous paragraph. In conclusion, bearing in ming that lot of you will have had some experience working with pop up menus, I would appreciate any sound suggestion about the best or the most standard approach to let me start working on a custom pop up menu. If you there might be other more interesting and useful way of doing these pop up menus that is not css or javascript, please tell me as well. I look forward your replies. Thanks in advance. Similar Tutorialshello im very excited about your whatever:hover script http://www.xs4all.nl/~peterned/csshover.html, but im wondering if there is a way to make the css valid (according to eric meyer in "more eric meyer on css" the behavior spec isnt valid css) instead of feeding ie through the behavior spec in the css file (that doesnt compute in other browsers), how about adding a conditional comment in the html file? im not sure what it would look like (as im no expert) but how about <!-- [if ie]> @import url("csshover.htc") <![endif] -->? or maybe it needs to be some form of <!-- [if ie]> <script type="text/jscript" src="csshover.htc"></script> <![endif] -->? thank you very much rasmus rasmus@samtaleterapi.com www.samtaleterapi.com I have three-level menu that is almost entirely CSS-driven (there's a little javascript for IE to get a clue; the system is based on the suckerfish dropdowns, which I learned about through A List Apart (http://www.alistapart.com/articles/dropdowns) and then visited HTMLDog to find out more (http://www.htmldog.com/articles/suckerfish/dropdowns/ ). In our case, Level 1 is always visible. Level 2 is visible when one mouseovers over the relevant Level 1 item, and Level 3 appears when one mouseovers the relevant Level 2. Levels 1 and 2 display horizontally; 3 displays vertically. We currently only have levels 2 and 3 for one menu 1 item, but the menus are built to be expandable. In trying to get to the right-most level 2 items, sometimes the a user might mouse might slide off the level 2 menu. The level 2 menu disappears, of course, because the CSS "thinks" maybe the user wants a different level 1 item, or that the user is done with the menus entirely. Is there a way to make this level 2 a little stickier and still ... -- use CSS for that? -- allow access to other level 1 items without confusing the user? -- have this level 2 menu vanish when a different Level 1 is chosen? -- allow for later expansion (level 2 menus under other items) -- drive this with mouseovers, not clicks (I could entirely rewrite the menu system to use more javascript and require mouseclicks, as the example he http://www.wpdfd.com/editorial/wpd1004news.htm#feature ...I'd prefer of course to use the work so far, but that may not be feasible.) One simple solution is to never let the current level 2 vanish, but that does defeat the idea of later expansion, and causes some confusion with what the different menu items really link to. So we can't use that solution. So. Help is welcome!! Please comment. I am looking for a robust drop down menu solution. Javascript is fine for controlling the functionality but the items must be positioned with CSS so that they are SEO. At the moment we have full javascrip menu's but the links don't get picked up by the search engines as they are encapsulated. I have tried the suckerfish stuff and it's a nightmare to be honest. Horrible to customise and very difficult to get a result you actually want. I need the following with this simple example 1) Horizontal Tabs: the <dt> appears along the top in one horizontal line, and when you click on the name, it'll display the <dd> content below. As you click on other tabs, the content area will be replaced by the corresponding tab content. If you click on a tab that's already opened, it'll close the display of its content. 2) Vertial Tabs: the <dt> appears long the left side of the page, each tab taking up one line. When you click on the name, the <dd> content will display to the right of the tabs. Same as above, as you click on other tabs, the content area will be replaced by the corresponding tab content. [php] <dl> <dt>Tab 1</dt> <dd>Content 1<br>Content 1<br>Content 1<br></dd> <dt>Tab 2</dt> <dd>Content 2<br>Content 2<br>Content 2<br></dd> </dl> [/php hope someone can help Is there any way to use multi level drop down menus that work on all browswers(IE 6 and 7, firefox, safari) without using .htc file or javascript included? This is nice, but the css in too messy. http://www.bluescopesteel.com If you have any betterones please tell me. Cheers Well I honestly have no idea which forum to stick this in so I'll start here? As the title says I'm trying to make a simple css tab menu, except I'm making it very difficult lol. The problem that I'm having is not only must the tabs be able to expand and contract depending on the content/word inserted, and also if a new category is created it must create another tab. There will always be one tab present labeled home/index/etc., centered in the design. Like this As a new category/page is created/included via php a new tab shows and they stay centerd. Like this This goes on to make a total of six tabs. As of right now I was planning on using these mac style tabs for the tab images but that seems to be whats making this the most diffucult.Especially since I wanted to use a diffrent tab image for the tabs when they are selected. This would be pretty straightforward in a table layout but I'm really trying for a completely css page. I would greatly appreciate any advice if this even sounds possible the way I described, some other way possibly, or if I'm just shooting for a pipedream. Thanks very much in advance. How is it that safari is toooooo stupid to recognize the fact that I've specified background images... it also doesn't recognize the display:inline attribute. Are these just things that are unsupported in safari? I can't for the life of me figure out why it's doing this. Code:
#tabs ul {
padding-left: 0;
margin:0px;
display: inline;.
}
#tabs ul li{
width:170px;
height:25px;
list-style: none;
display: inline;
text-decoration:none;
z-index:1;
}
#tabs ul li a{
height:25px;
background-image: url("../images/mainTab.jpg");
background-repeat: repeat-x;
display: inline;
font-size: 10pt;
color:#fff;
text-decoration:none;
}
#tabs ul li a.selected{
background-image: url("../images/mainTabSelected.jpg");
background-repeat: repeat-x;
color:#000;
}
Thanks for taking the time to read my question. I have an events page for my band. The page is layed out using tables. I'd like to change my pages over to using css. I'm having problems putting things where they need to go. Can someone help? it needs to work for both FireFox and IE Thanks Good Page (tables): www.pierced.ca/pierced-events.htm Messed up Page (css): www.pierced.ca/pierced-eventsWithCSS.htm I have css driven dropdown menus but they disappear when I try to scroll down. Also when they appear they are below the main content in my content box. I'm getting most of this information out of books and online forums. Anybody know anything about this? My Developement Site CSS code I know it isn't pretty yet, but I'm just working on basic layout for now. Please help me. This is driving me crazy. I am getting a problem in IE and I can't seem to figure out how to fix it. Of course, it works just fine in Firefox, but not IE. In IE, go to to this page. On the horizontal drop-down menu, go to "Guides." Then scroll through the three drop-down options and back up. Notice how the 3rd level menu suddenly dissapears behind the 2nd level menu? Here's the portion of my CSS file controling the menu: Code: /********** LAYOUT - HEADER **********/
#header {background: #ffffff;
margin-top: 10px;
margin-bottom: 25px;
padding: 0 0 8px;}
img.headerimg {margin-left: 25px;}
/** NAV - top horizontal nav **/
#nav,
#nav ul
{padding: 0;
margin: 0;
list-style: none}
#nav {height:1.5em;
font: 80% arial;
margin-top: 1em;
margin-left: 75px;}
#nav li {position:relative;
float: left;
width: auto;
display:block;
margin: 0;
padding:0}
#nav a
{display: block;
padding: 3px 10px 2px;
border-bottom: 1px solid rgb(98,61,15);
border-top: 1px solid rgb(98,61,15);}
/************* 2nd tier *************/
#nav li ul {width: 15em;
position: absolute;
left: -999em;
background: #ffffff}
#nav li:hover ul,
#nav li.sfhover ul
{left: 10px;
z-index:55555}
#nav li li {background:#9BCD9B;
float:none;
border: 1px solid rgb(98,61,15);
border-top: none;
padding-left: 0}
#nav li li a,
#nav li li a:link,
#nav li li a:visited,
#nav li li a:hover
{color:#000;
padding: 3px 10px;
border-bottom: none;
border-top: none;}
#nav li li a:hover {color: #000;
background: #FFDAB9;}
#nav li.active {background: #FFDAB9;}
#nav li.active a {color: #000000}
/************* 3rd tier *************/
#nav li ul ul {width: 30em;
font-size: 100%;
margin-left: 7em;
margin-top: -.7em}
#nav li:hover ul ul,
#nav li.sfhover ul ul
{left: -999em;}
#nav li li:hover ul,
#nav li li.sfhover ul
{left: auto;}
#nav li li li
{background: #f6f6f6;
border-top: 1px solid #fff;}
#nav li li li a,
#nav li li li a:link,
#nav li li li a:visited,
#nav li li li a:hover
{color: #006400}
/************* 4th tier *************/
#nav li ul ul ul{width: 30em;}
#nav li:hover ul ul ul,
#nav li.sfhover ul ul ul
{left: -999em;}
#nav li li li:hover ul,
#nav li li li.sfhover ul
{left: auto;}
#nav li li li li {background: #FFDAB9;}
#nav li li li li a:hover {color: #000;
background: #9BCD9B;}
Please help me! Thanks! Manny Hi there. I've become fond of the idea of non-javascript menus. I've been experimenting a little. So with help from various sources I managed to get a simple set working. I have this... Code:
#menu ul li > ul {
display: none;
position: absolute;
top: 18px;
left: 0;
width: 170px;
}
which correctly 'hides' the sub-menu. Then I have this Code:
#menu ul li:hover > ul {
display: block;
}
which should 'unhide' the sub-menu. Now, because I'd had success with the menu, I thought I should now look at validating my html and css. So far, I've just looked at the html part. My question is, why does it work with this code (which doesn't validate under Strict doctype)? Code:
<div id="menu">
<ul>
<li class="small"><a href="blah.php">About</a>
<li>Details On...
<ul>
<li class="small"><a href="blah.php">Registering</a>
</ul>
</ul>
</div>
and not this (which does validate)? Code:
<div id="menu">
<ul>
<li class="small"><a href="blah.php">About</a></li>
<li>Details On...</li>
<li>
<ul>
<li class="small"><a href="blah.php">Registering</a></li>
</ul>
</li>
</ul>
</div>
I'll listen to any thoughts on this, even the use (or not) of doctype strict. Thanks for listening! Stay JOLLY H Hi, I wanted to do a horizontal popout menu. I have the code and it works but I am trying to undertsand it better. It uses a csshover.htc file which i didn't download but the thing still works fine with a ie sniffer code in it. It doesn't use any javascript which I thought it needed. There seems a few ways to do expanding menus in css (with/without javascript)? Menus are more complicated than they look but I would some explanation on the above points before i continue. Hello does anyone have any links to good tabs tutorials I been looking at some other and most of the CSS code would not work well but I would just like some links thanks for ur time Hi there, I'm trying to integrate some SEO friendly dropdown menus into an existing website design. The trouble I'm experiencing so far is that the body of the design is aligned centre, and most of the examples I've seen thus far use absolute positioning of <div> elements (i.e. the design is left-aligned, so the designer knows to position the dropdown div X pixels). Is there a good reference I can use for positioning my divs properly? Thanks Thank you for your time and assistance. I am working on building my first website in 2 years. I am very interested in developing a good site interface with standard code that may be easily edited later. Specifically, I am interested in creating dynamic navigation menus that will be supported by as many browsers as possible. I have seen dynamic menus created with javascript, but I know I don't want to do that since some browsers do not support it/or do not have it enabled by default. Can you comment on whether or not CSS would be a good solution to get around this problem? I have never used CSS to create menus in the past, but it seems very useful for standardizing a site interface. I am also open to other suggestions, what would you do to accomplish this task? I am learning CSS and started to like it I was trying to make an image gallery so was just playing around with this link I got Please see this http://www.cssplay.co.uk/menus/tabmenu.html When I added five more images in this, the last images ceases to display How can I correct that I was testing this by adding this code 5 times <li> <a href="#nogo"> William Turner<br /> (1775-1851) <span> <img src="../img/turner.jpg" alt="painting" title="painting" /> This English painter was one of the greatest romantic interpreters of nature in the history of Western art and is still unrivaled in the virtuosity of his painting of light. </span> </a> </li> I was anticipating that a scrollbar would come automatically in the browser but that dint happen What should I do? i have 2 menus on my page. one is a vertical sliding menu & other is a floating menu. i want the vertical sliding menu to slide over the floating menu. i tried giving the floating menu a z-index of -2 since the vertical menu has z-index of -1. but it doesn't work coz the floating menu disappears. the vertical menu is written with tables while the floating menu has a div tag around it. this is the style for the vertical menu Code:
table.topnav
{position: relative;
top: 0;
left: 0;
padding-left: 2px;
}
table.menu
{position: absolute;
bottom: 0;
z-index: -1;
}
.pad{padding-top: 2px;}
.banner{z-index: 1;
position: relative;}
and this is the style for the floating menu Code:
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>
thank you xia Hi All, I seem to have made a mistake in installing a CSS drop-down menu b/c despite my best efforts, I cannot seem to make it work in Internet Explorer. I am using the Suckerfish method found http://www.alistapart.com/articles/dropdowns My CSS file is here And a sample page can be found here Does anyone see a mistake I made? All other browsers work beautifully, so the problem must lie in the Internet Explorer hack. In today's Website Development world, which kind of Drop Down menus do the pro's prefer to use, pure CSS without Javascript or CSS with Javascript? And also, can pure CSS Drop Down menus be used in Dynamic Websites? Thank you. Hello, I'm trying to replace one CSS nav menu with another, is there anyone who is familiar enough to assist me? |
|||||||