|
CSS - How Would I Make Collapsing Navigation Sub-menus?
Hi, I want to make something that works like this:
dhtmlgoodies.com/scripts/slidedown-menu2/slidedown-menu2.html# (cant post proper urls as I'm new) Whereby each link has a number of sub-links under it, and when you click a main link, the sub links for the previous one shut and the new one opens. But the tutorial on that site is not much help. It just gives you a load of code to copy into your editor, and when I've done that it didn't work anyway. Could someone point me in the direction of a tutorial to do this or let me know what I should be doing, as I can't seem to find anything on how to do it. Thanks! Similar TutorialsI am just being scripting and have been messing with this problem for several hours and still have gotten no where at all so I was hoping for some assistance. I am attempting to make my stacked links open upon mouseover to display all the sublinks beneath the main ones and then close one the mouse is moved away from that area. I have the main ones working, as that is easy, it is those others that have me stumped. I am using outset and inset boarders to make it appear as if a drawer is being pulled out to reveal the sub-links. Any advice would be great, thank you. Hi there, thanks for reading my post. I am looking to build a website using ASP, with databases. After receiving some advice from some (more experienced) friends, they recommended learning CSS. They said something along the lines of "its better than using frames because Search Engines will index your site better and you will have more control over your pages - changing one style sheet can change your whole site easily". I thought it sounded like what I need as I am hoping to produce a fairly professional looking site, however I am still a little confused. I am unsure if this is a "webdesign" problem, so forgive me if I have posted in the wrong place, but I am interested to know how navigation menus are made. What I mean is, I dont understand how to make a menu on the left of the page control the right panel of a page without using frames . I have spent some time reading the (70) examples on www.w3schools.com but I cannot seem to find the answer - so now I am worried that it cannot be done!! If anyone could perhaps paste some quick code for me to look at/reverse engineer or, equally useful, perhaps give links to a few tutorials/web resources on this I would be very grateful. Another question if I may (?!) - when designing navigation menus (top or left or whatever), is it best to use text that highlights to make the links to navigate the site, or to make the links into pictures (i.e. have a whole menu created from small buttons aligned underneath each other). I hope my question is clear. Thanks to anyone who can help, Regards, Porky I have two navigation menus on my site. One that is horizontal across the top and the second is vertical along the left side. Both of these have rollover effects. I would like to code this with as few lines as possible. So far, I only have the code for the left-side navigation menu. What else should I add for the horizontal menu? Code: #navbar ul{
list-style:none;
margin:0; /* removes indent in IE and Opera */
padding:0; /* removes indent in Mozilla and Netscape 7 */
border:none;
list-style-type:none; /*turns off display of bullet */
}
#navbar li{
border-bottom:1px solid #003366;
margin:0 /*dictates the space between navbar items */
}
#navbar li a {
display: block;
padding: 5px 0 5px 5px;
border-left: 10px solid #1958b7;
border-right: 0px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%
}
#navbar li a:hover {
border-left: 10px solid #1c64d1;
border-right: 0px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
I'm a bit stumped as far as what I'm doing wrong. Big surprise, eh? Basically, I made a dropdown navigation menu (tested in FF 3.6.8 and IE 8)...works great. I used an unordered list to do so (and jquery). Well, the problem is, when I add another list to the page, it adopts some of the same properties as my menu I do have an ID for the navigation menu, so I'm not sure what's going on here. Any help, thoughts, or ideas would be DEEPLY appreciated! You can find the sample at: http://www.myztacia.com/animated-menu2.html I figured it was easier to post the link than force you to create the webpage yourself Hi, I have a problem: the navigation submenu is appearing underneath the floated element (the images) that is placed under it. How can I get the navigation menu to appear 'over' the images? You can see it he http://serve5.net/xcage/ http://serve5.net/xcage/stylesheets/xcage.css Thanks. Hello. I've searched far and wide for a good tutorial on how to make multi-row navigation tabs (something that kind of resembles the System Properties box in Windows). Can this be done using ordered lists? Does anyone know of a good source for this? thanks much. -Dan the contentWrapper div section collapse prematurely in mozilla, but displays fine in IE. Anyone know why? http://www.mgan.net/work/10-06-04/layout1.html Is there a css rule I don't understand in firefox that IE is overlooking? So... I have two versions of this page, one that validates, and another that doesn't. Problem is that the invalid one looks correct! This is because I got the css working before i discovered the invalid code... The offending code involves a nested ul in my nav. The invalid, looking good version looks like this: Code: <ul> li / li / <ul> li / li / </ul> li / </ul> To make it valid, I have to wrap li tags around the nested ul. I've spent gobs of time trying to figure out how to get my styles to work with this new code, but I must be missing something very simple. Here are the urls: invalid & valid Here's the css: Code:
#nav {
width:180px;
background-image:url(/images/moraga_logo.png);
background-repeat:no-repeat;
float:left
}
#nav ul.l1 {
width:179px;
position:relative;
top:100px;
margin:0;
padding:0;
}
#nav ul.l2 {
width:179px;
margin:0;
padding:0;
}
#nav ul.l1 li {
list-style:none;
border-top:1px solid #FFFFFF;
height:21px;
font-family:geometric, lucida, verdana, sans-serif;
font-size:.8125em;
font-weight:normal;
text-transform:uppercase;
letter-spacing:.125em;
text-align:right
}
#nav ul.l2 li {
text-transform:lowercase;
border:none;
font-size:.6875em;
}
#nav li.active a {
color:#A22B38;
text-decoration:none
}
#nav li.active a:hover {
color:#FFFFFF;
text-decoration:none
}
#nav a:link {
color:#000000;
text-decoration:none
}
#nav a:visited {
color:#000000;
text-decoration:none
}
#nav a:hover {
color:#FFFFFF
}
#nav a:active {
color:#000000;
text-decoration:none
}
Thank, in advance, for your generous help! -BBD I thought I had this worked out before with the help of this forum, but it seems to be back again! In IE 6 (and maybe others, who knows. I am running Ubuntu =/ ) there is a big gap between the top horizontal nav and the comic. http://www.jjsunshines.com/ Any help would be greatly appreciated! I'll even trade you php help! Hi I have site where I am forced to set my content div <div id="content"> min-height with jquery on each page.Site Link This is because the content div keeps collapsing and ignoring the content it has. Can someone teach me how to fix this please. This is the first site I have attempted to layout using CSS and have ran into a slight problem that I can't figure out so I am looking to the expertise of others. I have a layout that contains a sidebar (used for sub-nav) and a content area all inside of a wrapper. When there is content in the sidebar all is fine in IE and Firefox; however when I include no content in the sidebar IE looks fine but Firefox collapses the space where the sidebar was and begins the content there. Here are some of the links; Appearing correctly due to content in sidebar: http://www.jaycutler.com/Eumyotheria/the_program/the_program_index.html Appearing incorrectly due to no content in sidebar: http://www.jaycutler.com/Eumyotheria/contact/contact.html The CSS file can be found he http://www.jaycutler.com/Eumyotheria/css/stylesheet.css Any advice that can be offered would be greatly appreciated. Thank you for your time, Brian Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! Hi. Please see the code below. I basically have a two column layout placed inside a container div(id="productDiv"). Each column is floated left, followed by an empty div that is set to clear:both. However, the productDiv collapses over the floated divs in Mozilla. It works as expected in IE. If I place a border on productDiv, it will expand as desired. This seems like buggy behavior for Mozilla. Has anyone ever seen this? Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Testpage</title>
<style type="text/css">
body{
background-color: #eeeeee;
color: #000000;
margin: 20px auto auto auto;
}
#content{
position: relative;
background-color: #ECEADD;
font-size: 8pt;
padding: 0;
}
#productDiv{
position:relative;
margin-left: 12em;
background-color: #00ff00;
/*border: 1px solid black;*/
padding:0;
}
#category{
position:relative;
color:#000000;
font-size: 18pt;
margin: .5em 0 .5em 0;
}
#productInfoLeftCol{
position: relative;
float: left;
}
#productImage{
position: relative;
height: 360px;
width: 310px;
display:block;
}
#productInfoRightCol{
position:relative;
float: left;
margin-left: 1em;
}
.clearer{
clear:both;
}
</style>
</head>
<body>
<div id="content">
<div id="productDiv">
<h2 id="category">Category</h2>
<div id="productInfoLeftCol">
<img id="productImage" src="http://www.google.com/intl/en/images/logo.gif" alt="Some Product Image"/>
some text here
</div>
<div id="productInfoRightCol">
rightcol
</div>
<div class="clearer"></div>
</div>
</div>
</body>
</html>
Hi all, I am trying to collapse columns on double click by changing the style visibility of a col class from visible to collapse. Nice idea idea but it is not supported on IE and , although Firefox claims it does, with Firefox doesn't work either. sooo, do you know of any alternative to using the collapse thingie? 'hidden' is not an option as it leaves the space of the column on the table layout. I am checking the display prop now but I am not understanding it very well if it's a solution for me. many thanks in advance. Or really in this case their not collapsing like the should be. I have extra white space above each heading link in the gallery: http://www.sonicparke.com/skydev/gallery/ I'm also guessing that the same issue is causing the whitespace above the single column pages across the site like these: http://www.sonicparke.com/skydev/about.php http://www.sonicparke.com/skydev/about.php But it's weird that it's not happening on these: http://www.sonicparke.com/skydev/news.php I know that the zen.css file is a mess but I plan on cleaning it up a little later once I've worked through figuring out what I need and don't need. Maybe that's part of my problem but I'm still having the issue on the single column pages which don't even use the zen.css stylesheet. Thanks for the help. Hi, I have a border around the content of my page which is limited in width but not height. Some of the pages have more content then others so the height adjusts. I also have a left column and a black background with and image in this column but I have 2 problems 1. In IE I can't seem to get this black column(div) to extend to the full height of the column so that it reaches the border. 2. In Firefox this left column extends all the way down the page and the border doesn't surround the text it sort of collapses The column is left floated and in a div and the content is right floated and in a div as well which is all surrounded by a div with a border. I would appreciate any help that you might offer. Thanks Everyone knows about collapsing margins, but not everyone knows that inline blocks never collapse. So it would appear that IE treats tables as block elements (so margins collapse) and firefox treats them as god-knows-what (but akin to inline elements - so they do not collapse). Now, whether its right or wrong, I want the firefox behaviour - so I tried to display the tables as inline. This fixes IE.... but breaks firefox - the tables "loose" their width parameter so they don't display with correct widths. Does any CSS guru know a nice solution to this dilema (I know a couple of dirty solutions). To elaborate further on what is going in: There are a number of tables one after the other in the normal flow of the document that need to be seperated by certain margins. I've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? |
|||||||