I have this code:

<header>
    <div>
        <nav>
            <ul>
                <li><a href="#menu">Menu</a></li>
            </ul>
        <nav>
    </div>
</header>

<!-- Menu -->
<nav id="menu">
    <h2>Menu</h2>
    <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">ABOUT</a></li>
    </ul>
</nav>

I want click in Menu and open the menu...but only link change for https://localhost:7084/#menu but page still in same posicion. Nothing happen.

I'm using Blazor Component.

CodePudding user response：

You said,

I want click in Menu and open the menu...but only link change for https://localhost:7084/#menu but page still in same posicion. Nothing happen.

You have only posted the HTML code for your menu. There should be some CSS code for the designing of the menu and some JavaScript code to make the menu work.

if you don't have the JS code along with your HTML code then your menu will not work.

Generally, when you click on the menu icon then some JS function/ code gets executed and shows you the menu items.

You could refer to How TO - Mobile Navigation Menu to get a detailed working code example for the menu.

CodePudding user response：

    #wrapper {
        -moz-transition: opacity 0.45s ease;
        -webkit-transition: opacity 0.45s ease;
        -ms-transition: opacity 0.45s ease;
        transition: opacity 0.45s ease;
        opacity: 1;
    }

    #menu {
        -moz-transform: translateX(22em);
        -webkit-transform: translateX(22em);
        -ms-transform: translateX(22em);
        transform: translateX(22em);
        -moz-transition: -moz-transform 0.45s ease, visibility 0.45s;
        -webkit-transition: -webkit-transform 0.45s ease, visibility 0.45s;
        -ms-transition: -ms-transform 0.45s ease, visibility 0.45s;
        transition: transform 0.45s ease, visibility 0.45s;
        position: fixed;
        top: 0;
        right: 0;
        width: 22em;
        max-width: 80%;
        height: 100%;
        -webkit-overflow-scrolling: touch;
        background: #585858;
        color: #ffffff;
        cursor: default;
        visibility: hidden;
        z-index: 10002;
    }
   

     #menu > .inner {
            -moz-transition: opacity 0.45s ease;
            -webkit-transition: opacity 0.45s ease;
            -ms-transition: opacity 0.45s ease;
            transition: opacity 0.45s ease;
            -webkit-overflow-scrolling: touch;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 2.75em;
            opacity: 0;
            overflow-y: auto;
        }

   

 #menu > .inner > ul {
        list-style: none;
        margin: 0 0 1em 0;
        padding: 0;
    }

        

    #menu > .inner > ul > li {
                padding: 0;
                border-top: solid 1px rgba(255, 255, 255, 0.15);
            }

            

    #menu > .inner > ul > li a {
                    display: block;
                    padding: 1em 0;
                    line-height: 1.5;
                    border: 0;
                    color: inherit;
                }

            

#menu > .inner > ul > li:first-child {
                border-top: 0;
                margin-top: -1em;
            }

   

     #menu > .close {
            -moz-transition: opacity 0.45s ease, -moz-transform 0.45s ease;
            -webkit-transition: opacity 0.45s ease, -webkit-transform 0.45s ease;
            -ms-transition: opacity 0.45s ease, -ms-transform 0.45s ease;
            transition: opacity 0.45s ease, transform 0.45s ease;
            -moz-transform: scale(0.25) rotate(180deg);
            -webkit-transform: scale(0.25) rotate(180deg);
            -ms-transform: scale(0.25) rotate(180deg);
            transform: scale(0.25) rotate(180deg);
            -webkit-tap-highlight-color: transparent;
            display: block;
            position: absolute;
            top: 2em;
            left: -6em;
            width: 6em;
            text-indent: 6em;
            height: 3em;
            border: 0;
            font-size: 1em;
            opacity: 0;
            overflow: hidden;
            padding: 0;
            white-space: nowrap;
        }

   

 #menu > .close:before, #menu > .close:after {
        -moz-transition: opacity 0.2s ease;
        -webkit-transition: opacity 0.2s ease;
        -ms-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 2em 2em;
    }

    

#menu > .close:before {
        background-image: url("data:image/svg xml;charset=utf8,");
        opacity: 0;
    }

    

    #menu > .close:after {
            background-image: url("data:image/svg xml;charset=utf8,");
            opacity: 1;
        }

    

    #menu > .close:hover:before {
            opacity: 1;
        }

    

    #menu > .close:hover:after {
            opacity: 0;
        }