Menu Design From Template

2 posts, 0 answers
  1. Alireza
    Alireza avatar
    1 posts
    Member since:
    Aug 2012

    Posted 14 Aug 2012 Link to this post

    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;}

  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 15 Aug 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top