...

View Full Version : pretty pop out menus?



Redd4
08-01-2012, 02:57 PM
Guys hey, feel free to crucify me for not searching (i didnt search...)

I'd like to find out how to create nice looking pop down menus, in either html or css. the kind found in the munu bar of this site

http://www.proffittscruisers.com/

now i realise thats a joomla site, but is there a way to do something similar ?

rounded edges and transparency would be nice

kind regards,
redd .

VIPStephan
08-01-2012, 03:23 PM
[…] in either html or css […]

There is no either/or. CSS does nothing all by itself and HTML doesn’t look like anything all by itself. There’s always both involved, HTML for the structure/meaning and CSS for the looks.

Now, you can learn the most by looking at how they have done it. And you can see it by looking at the website’s source code (a developer tool like Firebug or similar help analyzing the source code and styles applied). Basically you have a list:


<ul id="menu">
<li>item 1
<ul>
<li>item 1.1</li>
<li>item 1.2</li>
<li>item 1.3</li>
</ul>
</li>
<li>item 2
<div>
some more content here
</div>
<ul>
<li>item 2.1</li>
<li>item 2.2</li>
</ul>
</li>
<li>and so forth</li>
</ul>

… and show/hide the content on mouseover/out:


ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu > li {
float: left;
border: 1px solid green;
width: 100px;
}
#menu li li {
border: 1px solid red;
}
#menu > li * {display: none;}
#menu > li:hover * {display: block;}


And with CSS you can style that content however you like.

DrDOS
08-01-2012, 03:35 PM
There's some kind of time delay in that, so there has to be javascript too.

Redd4
08-01-2012, 03:38 PM
cheers. thanks for that. i actually did "inspect element" in chrome, but i was thrown by the div tags.

since ive started learning in the last months, it seems div tags are something i need not learn about, but i seem to run into them a lot. i think theyre obsolete now?

i have no friggin idea how they work, there everywhere though!

we've been learning through html5

DrDOS
08-01-2012, 04:24 PM
cheers. thanks for that. i actually did "inspect element" in chrome, but i was thrown by the div tags.

since ive started learning in the last months, it seems div tags are something i need not learn about, but i seem to run into them a lot. i think theyre obsolete now?

i have no friggin idea how they work, there everywhere though!

we've been learning through html5
Div tags are by no means obsolete. They can have many attributes, they are block elements so they can be sized and placed anywhere you want them on the page, they can have any kind of content, they are what you use to build a web page.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum