Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    32
    Thanks
    20
    Thanked 0 Times in 0 Posts

    pretty pop out menus?

    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 .

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,797
    Thanks
    6
    Thanked 1,023 Times in 996 Posts
    Quote Originally Posted by Redd4 View Post
    […] 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:
    Code:
    <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:
    Code:
    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.

  • Users who have thanked VIPStephan for this post:

    Redd4 (08-01-2012)

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,246
    Thanks
    15
    Thanked 254 Times in 254 Posts
    There's some kind of time delay in that, so there has to be javascript too.

  • Users who have thanked DrDOS for this post:

    Redd4 (08-01-2012)

  • #4
    New Coder
    Join Date
    Apr 2012
    Posts
    32
    Thanks
    20
    Thanked 0 Times in 0 Posts
    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
    Last edited by Redd4; 08-01-2012 at 02:41 PM.

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,246
    Thanks
    15
    Thanked 254 Times in 254 Posts
    Quote Originally Posted by Redd4 View Post
    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.

  • Users who have thanked DrDOS for this post:

    Redd4 (08-01-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •