Discussion: Menu

HTML and CSS HTML and CSS Menu

Avatar
Vakos
Member
Avatar
Vakos:11. January 11:02

Hello, I have a problem with menu on my page. In attachment is draft how it should look.

When i hover on menu item, it must highlight.

Do you know how can i do that?

 
Reply 11. January 11:02
Avatar
Vakos
Member
Avatar
Vakos:11. January 11:03

Here is attachment

 
Up Reply 11. January 11:03
Avatar
David Capka
ICT.social team
Avatar
Replies to Vakos
David Capka:11. January 11:31

Hi, you have to use the :hover CSS selector and provide which style should be applied to the highlighted item. I suppose you use li elements for menu items, so your CSS will look something like this:

ul.menu li:hover {
        color: red;
        /* other styles... */
}

See this lesson if you need help with coding your menu: https://www.ict.social/…and-entities and the following lesson if you need further help to style it.

Edited 11. January 11:32
 
Up Reply 11. January 11:31
Avatar
Vakos
Member
Avatar
Replies to David Capka
Vakos:11. January 12:00

I know how to make hover, but I don´t know how to make green rectangle. I know how to make with img, but it doesn´t function the hover effect.

I did´t write it, I know ...

 
Up Reply 11. January 12:00
Avatar
David Capka
ICT.social team
Avatar
Replies to Vakos
David Capka:11. January 12:06

You can use the :hover selector with images as well, you just have to use them as backgrounds:

ul.menu li:hover {
        background: url('images/menu_background_hover.png');
        /* other styles... */
}

I can't imagine how you'd add button labels on img elements anyway, the images should be backgrounds:

ul.menu li {
        background: url('images/menu_background.png');
        width: 100px;
        height: 50px;
        /* other styles... */
}
 
Up Reply 11. January 12:06
Avatar
Vakos
Member
Avatar
Replies to David Capka
Vakos:11. January 12:18

Yes, but when I use image it wil only for 1 example, but I need it for changing numbers of item. So, i need to make that green rectangle only with css and no image.

 
Up Reply 11. January 12:18
Avatar
David Capka
ICT.social team
Avatar
Replies to Vakos
David Capka:11. January 13:45

I'm afraid I don't know what you mean. You can use as many images as you want if you mean this, just assign a different class to each item.

If you want to use a pure-css solution, there could be a way of creating a div ellipse above the menu. I'd try to make its background white and the border green. Then disable the top borders. You'll end with that green rounded line which will cover the upper part of the green menu items if positioned correctly. However, the elliptic border won't change the color on hover, only the green background will.

I'd go with images.

Edited 11. January 13:45
 
Up Reply 11. January 13:45
To maintain quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it is free.

7 messages from 7 displayed.