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:
But how to create a popup menu when i hover this item?
I atached a picture with an example...
Thank You!
Attachment | Size |
---|---|
pop.jpg | 7.51 KB |
Have a look for "sons of
Have a look for "sons of Suckerfish" on Google.
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.
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."
(No subject)
KnightWolfJK wrote:As noted
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...
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.
Hugo wrote:Why dont you use
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?
Um, the thing you're
Um, the thing you're currently using?
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.
Hugo wrote:Says it all
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.
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.
Zanetti wrote:Hy!I have a
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:
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
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.
thepineapplehead wrote: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.
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.
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
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...
Webdesignerwannabe
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.
Webdesignerwannabe
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.