Friday, April 8, 2011

DNN unoreded list menu

Finally i made DNN unordered list with cool effects.This is unbelievably manageable than the normal navigation.There is no specific menu css for this. I simply maintain the style in skinn.css file with needed elements.In my previous work i made some modification over the existed one.
My css properties:

.shop_menu
{
background: #000000;
clear: both;

height: 26px;
text-align: center;

margin:0 auto;
padding:0px !important;
border:0px !important;

}
.shop_menu ul
{
list-style-type: none outside none ;
display:block;
float:right;
margin:0 auto;
padding: 0;
font-size: 1em;
margin-right:30px;
}
.mainMenu

{
margin:0px;

}
.mainMenu .root {
display: block;
float: left;
list-style: none outside none;
margin: 0 1px 0 0;


}
.mainMenu .mi a {
color:#fff;
display: block;

font-size: 1em;
padding: 6px 14px 0px 14px;
text-decoration: none !important;
text-transform: uppercase;

background-color: #ADD8E6;
width:auto !important;

}
.mainMenu .mi a:hover {
color: #FFFFFF;

font-size: 1em;
padding: 6px 14px 0px 14px;
}
.mainMenu .root a {
background:transparent;

}
.mainMenu .sel a {
color: #1297F9 !important;
background:url(images/menu-hover.jpg) repeat-x;
position:relative;
top:4px;
height:26px;
width:67px ;
color:#36AAF7 !important;

line-height:12px;
-moz-border-radius-topleft: 6px;
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topright: 6px;
-webkit-border-top-right-radius: 6px;
border-top-right-radius : 6px;
border-top-left-radius: 6p
x;

}

.mainMenu .m
{
background-color: #ADD8E6;
float: none;
padding:10px 0px 3px 0px;
width:auto;

height:auto;
text-align:left;

margin-top:7px;
}
.mainMenu .m li {
margin: 0;
line-height:20px;

}
.mainMenu .m a {
padding:5px 5px 3px 5px;
text-transform: none;
text-align:left;
width:auto;
white-space:nowrap;
word-spacing:normal;

background-color: #ADD
8E6;
}
.mainMenu .m img {
padding-right: 5px;
}


shop_menu is the main man bar and the main menus are the properties applying on the navigation.
Now playing with DNN menu
control,









These could be a simple solution for you too because i enjoyed it with,and my page is look like.






Enjoy styling :)

No comments:

Post a Comment