This is a migrated thread and some comments may be shown as answers.

Menu Design From Template

1 Answer 27 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Alireza
Top achievements
Rank 1
Alireza asked on 14 Aug 2012, 10:29 PM
hi there,
i now it might sound silly but i am new so, how can i have a menu with telerik for DNN form an html template i mean i have below codes that works fine with html and i need the same menu in DNN would anyone change this to a telerik menu skin so i might get the process.
and may be give me a tutorial of how to have the same menus as there are in html templates

my html menu was created by these css codes:

.menu.nav-bar{background: none; margin-top: 0px; border: 0px solid #ddd;}
.menu.nav-bar>li { display: inline-block; padding: 0; margin: 0; border-right: 0px solid #ddd; line-height:normal; padding:0px 0px;}
.menu.nav-bar>li li.parent ul { display: none;}
.menu.nav-bar li.parent ul {display:none;}
/* Main Navigation */
ul.menu.nav-bar {float:right;margin:10px 0 0 0; display:inline-block; width :1100px;}
ul.menu.nav-bar li a {color:#888; padding:6px 10px;  -webkit-transition: 0.3s ease;-moz-transition: 0.5s ease;-o-transition: 0.5s ease; transition: 0.5s ease;}
ul.menu.nav-bar li a:hover {color:#fff; text-shadow:0px 0px 10px rgba(255,255,255,1); text-decoration:none;}
ul.menu.nav-bar li.active a{color:#ccc; border:1px solid #111;box-shadow:inset -1px -1px 1px rgba(255,255,255,.05); border-radius:5px; border-right:1px solid #000; border-bottom:1px solid #000;}


/* Sub Menu Styling*/
ul.menu li.parent:hover ul, ul.menu li.over ul {background-color:#000; background-color:rgba(0,0,0,.85); border:1px solid #000; padding:10px 10px 0 10px; width:10em; box-shadow:inset 1px 1px 1px rgba(255,255,255,.1); border-radius:5px;}
ul.menu li.parent:hover ul li, ul.menu li.over ul li {width:100%; display:block; border-bottom:1px solid #333; padding:0 0 5px 0;}
ul.menu li.parent ul li:hover ul, ul.menu li ul li.over ul, ul.menu li.parent ul li ul li:hover ul, ul.menu li ul li ul li.over ul, ul.menu li.parent ul li ul li ul li:hover ul, ul.menu li ul li ul li ul li.over ul {margin-left:9em;}

1 Answer, 1 is accepted

Sort by
0
Ivan Zhekov
Telerik team
answered on 15 Aug 2012, 11:58 AM
Hi, Alireza.

Short answer is you can't have the menu the exact way you want it.

I will elaborate:
-- your snippet implies that the outer most element of the menu is an UL element, where as the RadMenu renders a DIV and then an UL
-- the snippet implies that the submenus are also UL elements, where as the RadMenu renders, again, DIV and then UL
-- the snippet implies that the menu hide / show interaction is done solely through css

Never the less with some changes it would be possible to use the snippet. For that to work, you will need to disable the embedded skins, base stylesheets and perhaps fine tune some of the JavaScript.

All the best,
Ivan Zhekov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Menu
Asked by
Alireza
Top achievements
Rank 1
Answers by
Ivan Zhekov
Telerik team
Share this question
or