locked
Bootstrp Menu Can Access Via CSS Style Sheet RRS feed

  • Question

  • User2033107836 posted

    Hello

    I used this in my aspx page To Create Menu

    https://codepen.io/dustlilac/pen/Qwpxbp

    My doubt is:-

    Instead of writing this menu in aspx page can i write this code in some external file  for example like css then later i call that file to my aspx page <div>inside

    How to do so...?

    Saturday, June 23, 2018 11:17 AM

All replies

  • User-943250815 posted

    I think you can can get what you what with Literal Control. https://msdn.microsoft.com/en-us/library/f93yf0ee(v=vs.85).aspx

    Place Literal control on page then on code-behind, load content from file then set text property of literal to text loaded.
    Hope this help you.

    Saturday, June 23, 2018 1:29 PM
  • User-369506445 posted

    hi

    <g class="gr_ gr_44 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="44" data-gr-id="44">yes</g> you can do it with <g class="gr_ gr_28 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="28" data-gr-id="28">a external</g> file below like :

    <g class="gr_ gr_61 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="61" data-gr-id="61">first</g> create a <g class="gr_ gr_76 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="76" data-gr-id="76">java script</g> file called MyJavaScript.js

    and put below code

    $(function () {
        var html = '<nav class="navbar navbar-default" role="navigation"> ' +
                   ' <div class="navbar-header" > '+
                '<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">'+
                    '<span class="sr-only">Toggle navigation</span>'+
                    '<span class="icon-bar"></span>'+
                    '<span class="icon-bar"></span>'+
                    '<span class="icon-bar"></span>'+
                '</button>'+
        '<a class="navbar-brand" href="#">Brand</a>' +
            '</div >' +
            '<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >' +
            ' <ul class="nav navbar-nav">' +
            ' <li class="dropdown">' +
            '<a href="#" class="dropdown-toggle" data-toggle="dropdown">One Column <b class="caret"></b></a>' +
            '<ul class="dropdown-menu">' +
            '<li><a href="#">Action</a></li>"' +
            '<li><a href="#">Another action</a></li>' +
            '<li><a href="#">Something else here</a></li>' +
            '<li class="divider"></li>' +
            '<li><a href="#">Separated link</a></li>' +
            '<li class="divider"></li>' +
            '<li><a href="#">One more separated link</a></li>' +
            '</ul>' +
            '</li>' +
            '<li class="dropdown">' +
            '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Two Column <b class="caret"></b></a>' +
            '<ul class="dropdown-menu multi-column columns-2">' +
            '<div class="row">' +
            '<div class="col-sm-6">' +
            '<ul class="multi-column-dropdown">' +
            '<li><a href="#">Action</a></li>' +
            '<li><a href="#">Another action</a></li>' +
            '<li><a href="#">Something else here that extra long so we can see how it looks</a></li>' +
            '<li class="divider"></li>' +
            '<li><a href="#">Separated link</a></li>' +
            '<li class="divider"></li>' +
            '<li><a href="#">One more separated link</a></li>' +
            '</ul>' +
            '</div>' +
            '<div class="col-sm-6">' +
            '<ul class="multi-column-dropdown">' +
            '<li><a href="#">Action</a></li>' +
            '<li><a href="#">Another action</a></li>' +
            '<li><a href="#">Something else here</a></li>' +
            '<li class="divider"></li>' +
            '<li><a href="#">Separated link</a></li>' +
            '<li class="divider"></li>' +
            '<li><a href="#">One more separated link</a></li>' +
            '</ul>' +
            '</div>' +
            '</div>' +
            '</ul>' +
            '</li>' +
            '</ul>' +
            '</div >' +
            '</nav >';
        
    
        $("#menuId").html(html);
    })

    and in your view

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/JavaScript.js"></script>
    
    <div id="menuId"></div>

    Sunday, June 24, 2018 4:47 AM
  • User2033107836 posted
    Hello Vahid

    Is this can be achieved only in javascript or we can go with css also...

    Need some easy method coz i have my menu with 86 links and also user wise
    Monday, June 25, 2018 5:52 AM
  • User-369506445 posted

    hi asp.ambur

    this was a way , another way is create a partial view(MVC) or a UserControl(asp)

    Monday, June 25, 2018 6:02 AM