18 replies [Last post]
Zanetti
Offline
Regular
Last seen: 6 years 28 weeks ago
Joined: 2007-05-02
Posts: 23
Points: 0

Hy!

I have a problem, I want to create a popup menu(submenu) but I don't know how.
I checked the internet but nothing.

So let's take an example. When I move my mouse cursor over one item in menu i want to display a popup menu(submenu) in right side of menu.

My CSS file contain this :
#browse {
float: left;
width: 195px;
margin: 0;
padding: 0;
background: white;
border-bottom: 2px solid white;
}

#browse dd {
background: #227293;
border-bottom: 1px solid #659db4;
padding: 0;
margin: 0 2px;
}

#browse dd a {
color: white;
font-weight: bold;
text-decoration: none;
display: block;
padding: 3px 22px;
}

* html #browse dd {
padding: 3px 22px;
padd\ing: 0;
}

* html #browse dd a {
display: inline;
di\splay: block;
}

#browse dd a:hover {
background: #74a7b7;
}

... and i create a simple menu item in this way in html:

Link

But how to create a popup menu when i hover this item?
I atached a picture with an example...

Thank You!

AttachmentSize
pop.jpg7.51 KB
thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 weeks 2 days ago
Timezone: GMT-5
Joined: 2004-06-30
Posts: 9668
Points: 801

Have a look for "sons of

Have a look for "sons of Suckerfish" on Google.

Verschwindende wrote:
  • CSS doesn't make pies

KnightWolfJK
KnightWolfJK's picture
Offline
Enthusiast
Washington, DC
Last seen: 7 years 26 weeks ago
Washington, DC
Timezone: GMT-5
Joined: 2003-06-10
Posts: 210
Points: 0

Ripped...

As noted by someone else on here the other day, I'd start [over] with http://css.maxdesign.com.au/listamatic and save yourself a bunch-o time. Even easier is http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic.

Diplomacy is the art of letting someone have your way

KnightWolfJK
KnightWolfJK's picture
Offline
Enthusiast
Washington, DC
Last seen: 7 years 26 weeks ago
Washington, DC
Timezone: GMT-5
Joined: 2003-06-10
Posts: 210
Points: 0

Sons of who's fish?

Man, I'd search for that one myself but it sounds like something NSFW that would get the firewall guys calling me up with a "net abuse report." Smile

Diplomacy is the art of letting someone have your way

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 weeks 2 days ago
Timezone: GMT-5
Joined: 2004-06-30
Posts: 9668
Points: 801

(No subject)

Verschwindende wrote:
  • CSS doesn't make pies

Zanetti
Offline
Regular
Last seen: 6 years 28 weeks ago
Joined: 2007-05-02
Posts: 23
Points: 0

KnightWolfJK wrote:As noted

KnightWolfJK wrote:
As noted by someone else on here the other day, I'd start [over] with http://css.maxdesign.com.au/listamatic and save yourself a bunch-o time. Even easier is http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic.

In my example i don't use ul (list) ...
So, could you help me for my example??

Thanks...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 days 2 hours ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Why dont you use a ul

Why dont you use a ul list?
Is there a reason you are using a dl list?

I can't quite understand why, when you have a image depicting a classic vertical hover menu you have gone and decided to try and make it with a dl list.

Suckerfish was mentioned as this is the standard method to follow to produce dropdown /pop out menus (call them what you will).

The natural construction of the ul elements in allowing nesting make it very suitable for this .

DL lists are not so suitable.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Zanetti
Offline
Regular
Last seen: 6 years 28 weeks ago
Joined: 2007-05-02
Posts: 23
Points: 0

Hugo wrote:Why dont you use

Hugo wrote:
Why dont you use a ul list?
Is there a reason you are using a dl list?

I can't quite understand why, when you have a image depicting a classic vertical hover menu you have gone and decided to try and make it with a dl list.

Suckerfish was mentioned as this is the standard method to follow to produce dropdown /pop out menus (call them what you will).

The natural construction of the ul elements in allowing nesting make it very suitable for this .

DL lists are not so suitable.

what is dl list?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 weeks 2 days ago
Timezone: GMT-5
Joined: 2004-06-30
Posts: 9668
Points: 801

Um, the thing you're

Um, the thing you're currently using?

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 days 2 hours ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Says it all really! Please

Says it all really!

Please heed our advice pop over to Son of Suckerfish copy the code there, have a go at styling it as you wish , if you get stuck then let us know and we'll try and help.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Zanetti
Offline
Regular
Last seen: 6 years 28 weeks ago
Joined: 2007-05-02
Posts: 23
Points: 0

Hugo wrote:Says it all

Hugo wrote:
Says it all really!

Please heed our advice pop over to Son of Suckerfish copy the code there, have a go at styling it as you wish , if you get stuck then let us know and we'll try and help.

Ok, but i'm a begginer in CSS, hope I can figure out

see ya. Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 days 2 hours ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Don't worry if you can't;

Don't worry if you can't; have a go, see how far you can get and when stuck post a link to the page and/or the code and we'll help you get things working.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Zanetti
Offline
Regular
Last seen: 6 years 28 weeks ago
Joined: 2007-05-02
Posts: 23
Points: 0

Zanetti wrote:Hy!I have a

Zanetti wrote:
Hy!

I have a problem, I want to create a popup menu(submenu) but I don't know how.
I checked the internet but nothing.

So let's take an example. When I move my mouse cursor over one item in menu i want to display a popup menu(submenu) in right side of menu.

My CSS file contain this :
#browse {
float: left;
width: 195px;
margin: 0;
padding: 0;
background: white;
border-bottom: 2px solid white;
}

#browse dd {
background: #227293;
border-bottom: 1px solid #659db4;
padding: 0;
margin: 0 2px;
}

#browse dd a {
color: white;
font-weight: bold;
text-decoration: none;
display: block;
padding: 3px 22px;
}

* html #browse dd {
padding: 3px 22px;
padd\ing: 0;
}

* html #browse dd a {
display: inline;
di\splay: block;
}

#browse dd a:hover {
background: #74a7b7;
}

... and i create a simple menu item in this way in html:

Link

But how to create a popup menu when i hover this item?
I atached a picture with an example...

Thank You!

for my example, how can i define a selected state?? when i select a menu item, that item changes in red... for example

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 weeks 2 days ago
Timezone: GMT-5
Joined: 2004-06-30
Posts: 9668
Points: 801

You need to walk before you

You need to walk before you can run.

Look through Sons of Suckerfish and the menus at listamatic and CSSPlay and get your head around them.

Get a functioning menu, then we'll move onto highlighted states.

Verschwindende wrote:
  • CSS doesn't make pies

Zanetti
Offline
Regular
Last seen: 6 years 28 weeks ago
Joined: 2007-05-02
Posts: 23
Points: 0

thepineapplehead wrote:You

thepineapplehead wrote:
You need to walk before you can run.

Look through Sons of Suckerfish and the menus at listamatic and CSSPlay and get your head around them.

Get a functioning menu, then we'll move onto highlighted states.

i used ul an li to build a menu, and i did it but something goes wrong. I'll be back with css code when i get some free time. Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 weeks 2 days ago
Timezone: GMT-5
Joined: 2004-06-30
Posts: 9668
Points: 801

Please, by all means

Please, by all means do!

See how you get on, then post your HTML and CSS codes if you get stuck Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Webdesignerwannabe
Webdesignerwannabe's picture
Offline
newbie
Romania
Last seen: 7 years 30 weeks ago
Romania
Joined: 2007-05-03
Posts: 6
Points: 0

I hope you get back quickly

Hope you get back quickly because I'm interested in this matter. Hope you can write the whole code for a pop up menu. I've been watching some tutorials but nothing about the hover pop-up menu etc...That would look very nice on a site...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 days 2 hours ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Webdesignerwannabe

Webdesignerwannabe wrote:
Hope you get back quickly because I'm interested in this matter. Hope you can write the whole code for a pop up menu. I've been watching some tutorials but nothing about the hover pop-up menu etc...That would look very nice on a site...

No I would hope that the 'Whole code' is not posted up!

look back at the replies here, they mention a very common technique for these very common menus 'Son of Suckerfish' if you go to that site you will find a complete guide and explanation on how to construct one of these menus, also if you look around the forum you will find a link to another version that you could use that can work on either vertical or horizontal layouts.

You will learn by following one of these guides, sometimes you just have to put a little groundwork in yourself, rather than waiting on others, if there are aspects you don't understand then we will be happy to offer assistance and further guidence on the implementation.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

KnightWolfJK
KnightWolfJK's picture
Offline
Enthusiast
Washington, DC
Last seen: 7 years 26 weeks ago
Washington, DC
Timezone: GMT-5
Joined: 2003-06-10
Posts: 210
Points: 0

Webdesignerwannabe

Webdesignerwannabe wrote:
Hope you get back quickly because I'm interested in this matter. Hope you can write the whole code for a pop up menu. I've been watching some tutorials but nothing about the hover pop-up menu etc...That would look very nice on a site...

Following the links in this thread should reveal upwards of 30 working menus, at least 10 of which are popup menus.

Diplomacy is the art of letting someone have your way