Modify sub-menu styles in navigation

Posts: 1931

Message # 1 | 2:17 PM 2010-08-16

Sub-Menu border

These codes must be placed inside: CP -> Customize Design -> CSS.

By colours you can change the part you need, I added also names.
(You can add only the part you need, no need to add whole code)

Code

#uMenuDiv1 .xw-tl {background:#FF0000;}  /* -- Left-Top        */
#uMenuDiv1 .xw-tc {background:#0000FF;}  /* -- Top Line        */
#uMenuDiv1 .xw-tr {background:#01DF01;}  /* -- Right-Top       */
#uMenuDiv1 .xw-mr {background:#FFFF00;}  /* -- Right Line      */
#uMenuDiv1 .xw-br {background:#000000;}  /* -- Right-Bottom    */
#uMenuDiv1 .xw-bc {background:#FE2EF7;}  /* -- Bottom Line     */
#uMenuDiv1 .xw-bl {background:#0B610B;}  /* -- Left-Bottom     */
#uMenuDiv1 .xw-ml {background:#00FFFF;}  /* -- Left Line       */

Sub-Menu inside

These codes must be placed inside: CP -> Customize Design -> CSS.

Quote

#uMenuDiv1 .xw-mc {background:#5858FA;border:1px solid #FF0000;}
#uMenuDiv1 .u-menubody {border:1px solid #00FF00;}

1. Line - Background and Red Line.
2. Line - Green Line

Red - Those are colour codes you can replace. ( Colour Codes )

Quote

#uMenuDiv1 .u-menuitemhl {background:#2EFEF7;}

This line will change whole items background on mouse-over.

Red - Those are colour codes you can replace. ( Colour Codes )

Quote

#uMenuDiv1 .u-menu a:link {color:#FFFF00;font-size:7pt;text-decoration:none;}
#uMenuDiv1 .u-menu a:visited {color:#FFFF00;font-size:7pt;text-decoration:none;}
#uMenuDiv1 .u-menu a:active {color:#FFFF00;font-size:7pt;text-decoration:none;}
#uMenuDiv1 .u-menu a:hover {color:#DF0101;font-size:8pt;text-decoration:none;}

1. 2. 3. Line - Normal line appearance.
4. Line - Link appearance on mouse-over.

Red - Those are colour codes you can replace. ( Colour Codes )

Blue - Number is font-size of the item. On hover it becomes bigger.

Sub-Menu arrow

Go to: CP -> Customize Design -> CSS.

You must modify .uMenuV .uMenuArrow.

There will be url which is for arrow and other data like arrow's position, height, width etc.

Attachments: 7784329.png (13.5 Kb) · 8500930.png (13.0 Kb)

[... With uCoz since December 2 2007 ...]

Post edited by CreativeCollusions - Wednesday, 2011-01-05, 8:46 PM

onescu

Posts: 20

Reputation: 0

Message # 2 | 10:37 AM 2010-10-10

thanks a lot tongue

Zain

Posts: 68

Reputation: -7

Message # 3 | 9:39 PM 2010-11-13

thanks

PixelKhaos

Posts: 636

Reputation: 26

Message # 4 | 2:22 PM 2011-12-28

Is there a way to move the submenu from the side, to under the main menu?

Added (2011-12-28, 8:22 AM)
---------------------------------------------
Ah, nevermind that question.

Another question though, how do I edit the style for a horisontal menu?

Proud uCoz user since 2006
Freelance designer - http://pixelkhaos.com
PixelKhaos on twitter - @PixelKhaos

I can help you develop your site for a small fee.

Post edited by Acid - Wednesday, 2011-12-28, 2:30 PM

Jan

Posts: 301

Reputation: 19

Message # 5 | 2:48 PM 2011-12-28

Acid, did you mean horisontal sub-menu? if so then its the same way.. if not, explain more detail

PixelKhaos

Posts: 636

Reputation: 26

Message # 6 | 9:18 PM 2012-01-02

I have an horisontal menu with a submenu, but the CSS style didn't apply to it.

Added (2012-01-02, 3:18 PM)
---------------------------------------------
Uh, sorry to bump, but my horisontal menu with a submenu still won't change when I change in my css.

Proud uCoz user since 2006
Freelance designer - http://pixelkhaos.com
PixelKhaos on twitter - @PixelKhaos

I can help you develop your site for a small fee.

Sunny

Posts: 9296

Reputation: 456

Message # 7 | 1:19 PM 2012-01-04

Acid, provide the website URL and the added CSS code.

I'm not active on the forum anymore. Please contact other forum staff.

PixelKhaos

Posts: 636

Reputation: 26

Message # 8 | 6:11 PM 2012-01-29

http://crucifiedfilth.do.am/

Code

#uMenuDiv1 .xw-mc {background:#333333;border:0px solid #FF0000;}
#uMenuDiv1 .u-menubody {border:0px solid #00FF00;}
#uMenuDiv1 .u-menuitemhl {background:#222222;}
#uMenuDiv1 .xw-tl {background:#333333;} /* -- Left-Top */
#uMenuDiv1 .xw-tc {background:#333333;} /* -- Top Line */
#uMenuDiv1 .xw-tr {background:#333333;} /* -- Right-Top */
#uMenuDiv1 .xw-mr {background:#333333;} /* -- Right Line */
#uMenuDiv1 .xw-br {background:#333333;} /* -- Right-Bottom */
#uMenuDiv1 .xw-bc {background:#333333;} /* -- Bottom Line */
#uMenuDiv1 .xw-bl {background:#333333;} /* -- Left-Bottom */
#uMenuDiv1 .xw-ml {background:#333333;} /* -- Left Line */

Added (2012-01-29, 12:11 PM)
---------------------------------------------
Uh, still need help.

Proud uCoz user since 2006
Freelance designer - http://pixelkhaos.com
PixelKhaos on twitter - @PixelKhaos

I can help you develop your site for a small fee.

Sunny

Posts: 9296

Reputation: 456

Message # 9 | 12:55 PM 2012-01-30

Acid, is it your custom template or a modified default template? If the latter - which one?

I'm not active on the forum anymore. Please contact other forum staff.

PixelKhaos

Posts: 636

Reputation: 26

Message # 10 | 4:13 PM 2012-01-30

It's a custom one.
But that shouldn't affect the sub menu, or?

Added (2012-01-30, 10:13 AM)
---------------------------------------------
Aha! I solved the problem.
The tutorial was unclear about several menu's.
I hade to change "uMenuDiv1" to "uMenuDiv3", since the menu I wanted to change was $SMENU_3$

Proud uCoz user since 2006
Freelance designer - http://pixelkhaos.com
PixelKhaos on twitter - @PixelKhaos

I can help you develop your site for a small fee.

malmal

Posts: 1

Reputation: 0

Message # 11 | 4:08 AM 2012-11-03

I found all these css codes in the file LAYER1.css which is in the s57.ucoz.net. So i cannot modify this css, becuase it is loaded by default and i dont know how to over write it. Even i load another css which use the same coding as Layer1 , the style in layer1 still overwrite mine.
i also placed the replaced code inide CP -> Customize Design -> CSS, but the layer1.css still override it!!

how to remove layer1.css??

PLease help!!!

Sunny

Posts: 9296

Reputation: 456

Message # 12 | 1:53 PM 2012-11-05

malmal, what are the exact styles you want to edit? There is such parameter as !important, it is used to indicate what's more important in the CSS.

I'm not active on the forum anymore. Please contact other forum staff.

Nick2973

Posts: 9

Reputation: 0

Message # 13 | 10:58 PM 2012-12-31

How do we change the hover color?

Paradox

Old Guard

Posts: 3284

Reputation: 145

Message # 14 | 4:49 AM 2013-01-02

Nick2973, I'd advise against using a hover for the AJAX boxes however create a separate duplicate class with ":hover" appended to the end of the class name. smile

Jack of all trades in development, design, strategy.
Working as a Support Engineer.
Been here for 13 years and counting.

nomi1783

Posts: 15

Reputation: 0

Message # 15 | 1:04 PM 2013-02-03

Hi

I've already asked this question but I couldn't do this.

My questions are:

1. Can I create sub-tabs under main tab? For example if i have a main tab of 'seo services then can I create a menu like this?
SEO Services
On Page SEO | Off Page SEO | Monthly SEO | Link Building

these sub tabs should be static. That is if somebody does not put mouse cursor on seo services, even then they are present there.

I need the html or any other code to do that. Anybody can help? My site is seomania.at.ua

2. My next question is, can I make the custom URL's for my website pages? E.g. My seo services page has a url like this: seomania.at.ua/index/seo_services/0-7 or so. I want to make it as seomania.at.ua/seo-services. If its possible then how can i change that?

Post edited by nomi1783 - Sunday, 2013-02-03, 1:07 PM

Page 1 of 2 1 2 »
Forum moderator: bigblog