homepage Welcome to WebmasterWorld Guest from 54.166.122.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Drop Down over sliced images
jester08

5+ Year Member



 
Msg#: 3737141 posted 8:18 am on Sep 3, 2008 (gmt 0)

Hi, I am new at css layout, can any of you guys help me figure out how to create a simple css drop down over sliced images from the nav. this it what I mean <>

each tab will have a drop down (all text), and I'd also like to have a roll over on every tab.

Any help would be greatly appreciated. Like i said i am new at this but i am a fast learner. All i need is to know where to get it and how to set up the right code for this.

Thanks in advance.

Simone

[edited by: SuzyUK at 10:06 am (utc) on Sep. 3, 2008]
[edit reason] Please No URI's, see guidelines at top of forum [/edit]

 

csuguy

5+ Year Member



 
Msg#: 3737141 posted 9:31 am on Sep 3, 2008 (gmt 0)

Here's a simple sample drop-down menu I created a while back. It's pretty easy to understand just by looking at the code. I couldn't get it to work when switching the div's to ul's - though I'm sure someone on here can get it to work with them. Here it is:


<html>
<head>
<title>Simple Drop-Down Menu</title>

<style>
<!--
.menu
{
border: 1px solid black;
background-color: orange;
}

.menuItem
{
padding: 0px 20px;
float:left;
position: relative;
font-weight: bold;
color: white;
}

.menuItem a:link,a:visited
{
color:white;
text-decoration:none;
}

.menuItem a:hover
{
color: blue;
}

.subMenu
{
position:absolute;
top: 90%; /* not 100% - causes menu to go out of focus and disapear*/
left:0px;
display:block;
width: 100%;
list-style-type:none;
padding:0px;
margin: 0px;
visibility:hidden;
}

.subMenu li
{
position:relative;
display:block;
width:100%;
border: 1px dashed black;
}

.menuItem a:hover .subMenu
{
color:blue;
visibility:visible;
}
-->
</style>
</head>

<body>

<div class="menu">
<div class="menuItem">
<a href="javascript:void();">Home</a>
</div>

<div class="menuItem">
<a href="javascript:void();">Services
<ul class="subMenu">
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</a>
</div>

<div class="menuItem">
<a href="javascript:void();">Users
<ul class="subMenu">
<li>Login</li>
<li>Register</li>
</ul>
</a>
</div>
<div style="clear:both"></div>
</div>

</body>
</html>

If you have any questions about how that works just ask.
Ryan

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3737141 posted 2:13 pm on Sep 3, 2008 (gmt 0)

Hi Simone and Welcome to WebmasterWorld! [webmasterworld.com]

first put the image back together ;)
seriously it's either that or you'll need to slice it further as you've 4 images in table cells which actually make up 5 menu tabs and a left side logo (home link?)

if you put the image back together and then make a second identical image, identical except with the rollover effects built in. you can search for "CSS Sprite Rollover Menu" that should get in the right direction for the rollovers, the dropdowns will then be placed relative to whatever element (probably an <li>) you use to build the top level navigation.

You're looking for two different steps top get the whole effect, Rollover "Sprite" Menu and then Horizontal Drop Down Techniques

jester08

5+ Year Member



 
Msg#: 3737141 posted 8:40 pm on Sep 3, 2008 (gmt 0)

Thank you SuzyUK, my next question to you is: since you saw what the ultimate goal is, would you even bother doing it in css? or would you just do the whole thing with a java script (like I used to do them). I was just trying to learn a different technique, since css has become the standard... but I'd like to know if you think that this is not worth it. Thanks, Simone

csuguy

5+ Year Member



 
Msg#: 3737141 posted 2:24 am on Sep 4, 2008 (gmt 0)

I like using CSS because 1) You don't have to use different code for different browsers (for the most part - there are a few trouble areas but none around drop-down menus that I'm aware of), 2)Something like 10% of users turn off Java script and 3)The code is easier - IMHO. But #3 depends on what you're use to, so if it is just that much easier for you do so. My code that I posted can easily be transformed to serve your purpose (mostly just adding background-images).

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3737141 posted 7:57 pm on Sep 4, 2008 (gmt 0)

Simone, I absolutely would do this one in CSS, - I bet your HTML code would be a lot lighter using CSS rather than JS if this were done properly.

Also the actual HTML could remain the same with just the CSS changing if you wanted a different look to the menu.. or adding an item would require 1 x <li> to be added with some adjustment to the background graphic and CSS units

it's a lot to learn in one go but if you give me a bit I'll try to explain the "how" (though trying to explain a "CSS Sprite" without images could be fun ;))

take a look at zeldman.com [zeldman.com] and at the top navigation (the daily report.. etc). It has no drop downs but don't worry about that bit yet csuguy has already given the basic code for adding them) but it's the one image rollover that's the first part to tackle.. the dropdowns can be added to it as they can to any menu, whether by JS or CSS again would be up to you.

Rollovers (hover effects) are a basic CSS Function

the top nav image for zeldman's site: is here [zeldman.com]
That is a CSS Sprite - 10 images condensed into one - imagine if you were to add an active state or a visited stated you could have 20 images in one!

anyway back to that one the top half is the normal link state.. the bottom half is the rollover (hover/active) state

now if you imagine yours you can also build the side logo into it or keep it separate that would be up to you..

the HTML is a simple list (it will likely be nested lists once the drop menus are added)

<div id="globalnav">
<ul id="menu">
<li id="dailymenu"><a href="/" title="Web design news and insights since 1995.">daily report</a></li>
<li id="dwwsmenu"><a href="/dwws/" title="The why and how of standards-based design, now in its second edition.">designing with web standards</a></li>
<li id="glammenu"><a href="/glamorous/" title="Episodes and Recollections.">my glamorous life</a></li>
<li id="classicsmenu"><a href="/classics/" title="Entertainments and experiments.">classics</a></li>
<li id="aboutmenu"><a href="/about/" title="Fun facts.">about</a></li>
</ul>
</div>

it works because the links themselves are given the dimensions that the "separate" image would have i.e. they become 5 separate windows to the image.. then when you rollover/hover on a link it it simply moves the entire background image up but because the links dimension is only enough to show it's personal part of the bigger picture you only see the image change in one of the links

your image would be taller than this one.. but that simply means you dimension your links accordingly, in the CSS, to fit your image

re the left logo, if you did decide to build it in with whole image you could simply dimension the link just to cover the company name or you can have it fit the full part of the logo image

sorry it wouldn't take me minutes to do it, but it could take me for ever to explain it without an image :o

jester08

5+ Year Member



 
Msg#: 3737141 posted 8:20 am on Sep 5, 2008 (gmt 0)

OK Great I got it, it's really great and fun once I start getting it. So I made the rollover part working. Now how do I add a drop down to my tabs. What is the best way to go about it? Preferably something that will work with all the various browsers.

Thanks a lot you guys, you have been super helpful!

Simone

[edited by: DrDoc at 6:27 am (utc) on Sep. 14, 2008]

csuguy

5+ Year Member



 
Msg#: 3737141 posted 5:09 pm on Sep 5, 2008 (gmt 0)

I take it back - I've been trying to get my code to work and I don't see a way to do it w/o javascript. Using the a tag for the hover will get it to display the menu, EXCEPT when you put another a tag or other inline object inside of it....

So javascript must be used with it rather than the a tag for it to work...

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3737141 posted 9:26 pm on Sep 5, 2008 (gmt 0)

I've been trying to get my code to work and I don't see a way to do it w/o javascript

of course you can do it without JS, except for IE6 and below..(thankfully very close to defunct!) in which case you can use MS proprietary code like we have have been using for years (conditional comments anyone?)

however the trend now seems to be back towards JS.. but not functional JS, not the bits that actually control the hovers, it more just "pretty" JS - (slower, fading transitions etc..), which is fine by me that's akin to providing a nicety, aesthetic effect IMHO - so to my mind, you need to ask yourself is your code semantic?, do you care?, does your boss need it? - and still are you happy that whichever bit of your source code that you need "read" by text browsers/spiders/bots are actually accessible?.

If with all; the above, you're absolutely fine, then yes there are 'off the shelf' solutions out there -but you still need to choose wisely!

If you need accessibility and you want to use JS then you have to use CSS adding in JS only if it degrades satisfactorily per your remit

ALA have a new article CSS Sprites 2 which nicely blends the 2 methods (Sprites and jQuery).. and two of the Mods here, (well one recently retired) are responsible for a CSS drop menu, both horizontal and vertical, that's been online for nearly 5 years (bit ahead of it's time perhaps heh...)

the thing is you have to use what you know, but do not stop learning, with your menu Simone, you could likely incorporate it whichever way you know how in order to get the site released, but isolate it i.e do not put it in a nested table) and you could then work on just this portion after the fact

csuguy

5+ Year Member



 
Msg#: 3737141 posted 10:35 pm on Sep 5, 2008 (gmt 0)

Hey Suzy,

could you send me (or post in this thread as its relevant) a link to those two menu's. I'd like to see how they did their's. I've tried looking online, but all of the menu's online seem to have some amount of javascript that is required to make them work. I'd love to do it with just css if I can - I hate javascript...

jester08

5+ Year Member



 
Msg#: 3737141 posted 4:33 am on Sep 12, 2008 (gmt 0)

Hey guys, new issue. I am now trying to have this page go 100% and some reasons it hangs and does not extend at all.
<snip> this is it. I need it to be expanding even if the bottom white with the small paragraph will be mostly empty in some resolution if stretch 100%. Thank a bunch.

@charset "utf-8";

/* Global ___________________________ */
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
outline: none;
color: #950000;
}
img {
border: 0 none;
}
body {
background: #282828 url(../../img-resolecon/bg.jpg) repeat-x;
text-align: center;
height: 100%;
font: 10px/16px "Lucida Grande", Arial, sans-serif;
color: #666;
}
ul {
list-style: none;
}

/* Layout ___________________________ */
#wrapper {
background: #e9eae5;
width: 740px;
margin: 0 auto;
height: auto;
text-align: left;
padding: 10px 0 10px 10px;
}
.home {
height: auto !important;
}

/* Display ___________________________ */
#header {
background: url(../../img-resolecon/header.jpg) no-repeat;
width: inherit;
height: 122px;
}
#header #homeLink {
width: 250px;
height: 90%;
display: block;
float: left;
}
#header ul {
float: left;
margin: 92px 0 0 10px;
}
#header ul li {
float: left;
}
#header ul li a {
font-size: 11px;
text-transform: uppercase;
color: #0f0f0f;
display: block;
border-left: 1px solid #a31508;
padding: 0 5px 0 5px;
}
#header ul li ul {
display: none;
min-height: 85px;
width: 124px;
position: absolute;
background: url(../../img-resolecon/subnav_bg.png);
float: none;
margin: 0;
padding-top: 18px;
}
#header ul li ul li {
display: block;
float: none;
margin: 2px 0 2px 0;
}
#header ul li:hover > ul {
display: block;
}
#header ul li ul li a {
border: 0 none;
color: #fff;
text-transform: none;
}
#header ul li ul li a:hover {
background: #aa190b;
}
#header ul li a:hover {
sbackground: #a9a8a8;
}
#header #lastNode {
border-right: 1px solid #a31508;
}
#header div {
width: 55px;
float: right;
margin: 10px 10px 0 0;
}
#header div a {
display: block;
}
#header div #sitemap {
background: url(../../img-resolecon/sitemap.gif) no-repeat;
width: 45px;
height: 41px;
margin-bottom: 8px;
}
#header div #disclaimer {
background: url(../../img-resolecon/disclaimer.gif) no-repeat;
width: 52px;
height: 46px;
position: relative;
right: 5px;
}
#columns {
height: 300px;
}
#columns div {
background: #fff;
width: 230px;
height: 289px;
padding: 3px;
float: left;
margin: 10px 10px 0 0;
}
#columns h1 {
background: url(../../img-resolecon/column_head_bg.jpg) no-repeat;
width: 223px;
height: 24px;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 2px 0 0 7px;
}
#columns div div {
background: transparent;
width: 215px;
height: auto;
margin: 0 auto;
}
#columns div div p {
margin-bottom: 5px;
}
#columns a {
font-style: italic;
}
#columns a span {
color: #666;
}
#columns a:hover {
color: #666;
}
#columns a:hover span {
color: #950000;
}
.wide {
background: #fff;
width: 725px;
height: auto;
margin: 15px 0 0 0;
padding: 3px 0 0 3px;
}
.wide div {
padding: 10px;
}
.wide div p {
margin-bottom: 10px;
}
.wide div strong {
font-size: 12px;
font-style: italic;
}
.wide h1, #content h1, #sideNav h1 {
background: url(../../img-resolecon/column_head_bg_wide.jpg) no-repeat;
width: 717px;
height: 100%;
color: #fff;
font-size: 12px;
font-weight: bold;
margin-bottom: 5px;
padding: 3px 0 0 7px;
text-transform: uppercase;
}

/* Interior Pages ___________________________ */
#sideNav {
background: url(../../img-resolecon/sidenav_bg.jpg) no-repeat;
width: 238px;
min-height: 685px;
float: left;
position: relative;
}
#sideNav h1 {
background: none;
width: 230px;
padding: 7px 0 0 10px;
}
#sideNav ul {
margin: -3px 0 0 3px;
}
#contentWrap {
background: url(../../img-resolecon/wrap_bg.gif) repeat-y;
width: 100%;
height: 100%;
margin-top: 10px;
}
#content {
background: #fff;
width: 479px;
height: 100%;
min-height: 597px;
margin: 0 11px 0 0;
padding: 3px 3px 0 3px;
float: right;
}
#content h1 {
background: url(../../img-resolecon/content_head_bg.jpg) no-repeat;
width: 479px;
height: 26px;
}
#content div {
padding: 1px 5px 5px 5px;
}
#content strong {
font-size: 14px;
color: #111;
}
#content p {
margin-bottom: 10px;
}
.partner, .partnerAlt {
padding: 3px;
}
.partnerAlt {
background: #E9E9E9;
}

[edited by: engine at 11:06 am (utc) on Sep. 12, 2008]
[edit reason] No URLs [/edit]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved