Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Html Javascript: Rechtsbündiges Dropdown Menü

25.04.2018 (👁8047)


 

Dieses Code Beispiel erstellt ein Dropdown Menü, welches sich beim Click auf ein Element öffnet und schliesst.

Die Lösung wird mit HTML und Javascript umgesetzt.

 

Hintergrund:

Es gibt einige Beispiele von Dropdown Menüs in HTML und CSS-Styles. Leider werden diese immer mit absolut-Postionen definiert.

Das hat zur Folge, dass die einfachen Dropdown-Menüs immer rechts über den Bildrand hinausragen.

 

Deshalb erstellt dieses Beispiel mit Hilfe von einem kleinen Javascript Code ein Menü, welches sich beim Öffnen an dem Button orientiert und nach link geöffnet wird.

 

Man benötigt für das dropdown Menü ein start-element mit einer eindeutigen ID wie hier <a id="btnMenuLogin">

Der Link führt beim Click-event die javascript Funktion aus: onclick="menu_openclose_Login();"

<div>

   <a id="btnMenuLogin" href="javascript:void();" onclick="menu_openclose_Login();">

      <img src="~/_images/ico/User_Login.png" />

    </a>

    <div id="divMenu_Login" onmouseleave="menu_close_Login();">

    <a href="?v=m">📱 Mobile</a>

    <a href="?v=d">💻 Desktop</a>

    </div>

</div>

 

 

Beim Öffnen wird das Div-Element ermittelt, welches als Dropdown-Menü erscheinen soll.

var menuPad = document.getElementById("divMenu_Login");

 

Wenn dieses noch nicht sichtbar ist, dann wird es sichtbar geschaltet

if (menuPad.style.visibility != "visible") {..}

 

Anschliessend wird dem Dropdown-Menü über die style-Attribute der linke Abstand zur Laufzeit eingestellt

        menuPad.style.left = String(posButton - padWidth + btnWidth) + "px";

        menuPad.style.visibility = "visible"

 

 

 

Javascript Code zum Öffnen und Schliessen

function menu_openclose_Login() {

    //--------< menu_open_Login() >--------

    var menuPad = document.getElementById("divMenu_Login");

    if (menuPad.style.visibility != "visible") {

        //< set visible >

        var btnPad = document.getElementById("btnMenuLogin");

        var posButton = btnPad.offsetLeft;

        var btnWidth = btnPad.offsetWidth;

        var padWidth = menuPad.offsetWidth;

        menuPad.style.left = String(posButton - padWidth + btnWidth) + "px";

        menuPad.style.visibility = "visible"

        //</ set visible >

    }

    else {

        //< set hidden >

        menuPad.style.visibility = "hidden"

        //</ set hidden >

    }

    //--------< menu_open_Login() >--------

}

 

Javascript Code zum Schliessen

function menu_close_Login(event) {

    //--------< menu_close_Login() >--------

    //< set hidden >

    var menuPad = document.getElementById("divMenu_Login");

    menuPad.style.visibility = "hidden"

    //</ set hidden >

    //--------< menu_close_Login() >--------

}

 

 

Kompletter HTML Asp.Net Core MVC Code der AnzeigeView, sofern die Lösung in einem Asp.Net MVC Razor Konzept umgesetzt wurde.

@using Microsoft.AspNetCore.Identity

@using Readdy.Models

@using Readdy.Data

 

@inject SignInManager<ApplicationUser> SignInManager

@inject UserManager<ApplicationUser> UserManager

 

 

<div>

 

    <a id="btnMenuLogin" href="javascript:void();" onclick="menu_openclose_Login();">

        @{

            //--------< Get User-Defined Information >--------

            //< get UserGuid >

            string sIDUserGuid = UserManager.GetUserId(User);

            //</ get UserGuid >

 

            if (sIDUserGuid == null)

            {

                //----< Not logged in >----

                <img src="~/_images/ico/User_Login.png" alt="Login Register as User" style="padding:0;margin-right:10px;" />

                //----</ Not logged in >----

            }

            else

            {

                //----< Is Logged in >----

                //< get NumberID >

                //*get the Long-64 increment Number in AspNetUsers IDUser Type bigInt

                long lngIDUser = UserManager.Users.FirstOrDefault(u => u.Id == sIDUserGuid).IDUser;

                //</ get NumberID >

 

                //< show ProfilImage >

                string sImage = "/User_Files/User_Images/40/User_Image_" + lngIDUser + ".jpg";

                <img src="@sImage" style="border-radius:50%" />

                //</ show ProfilImage >

 

                @*<img src="~/User_Files/User_Images/40/User_Image_1.jpg"/>*@

                //----</ Is Logged in >----

            }

            //--------</ Get User-Defined Information >--------

        }

        <i class="fa fa-caret-down"></i>

    </a>

    <div id="divMenu_Login" class="mynavdropdown-content" onmouseleave="menu_close_Login();" style="position:absolute;visibility:collapse;background-color:white;display:flex;flex-direction:column;width:200px">

        @if (SignInManager.IsSignedIn(User))

    {

        @*--------< User: Is Logged In >--------*@

        <a asp-controller="Manage" asp-action="Edit_Profile"><img src="~/_images/ico/icoProfil.png" style="vertical-align:bottom;" />@UserManager.GetUserName(User)</a>

 

        <form asp-controller="Account" asp-action="Logout" method="post" id="logoutForm">

            <button type="submit" class="btn btn-link navbar-btn navbar-link">Log out</button>

        </form>

        @*--------</ User: Is Logged In >--------*@

}

else

{

    @*--------< User: NOT Logged In >--------*@

    <a asp-controller="Account" asp-action="Login"><img src="~/_images/ico/icoLogin.png" style="opacity:0.8;" /> Log in</a>

    <a asp-controller="Account" asp-action="Register"><img src="~/_images/ico/icoRegister.png" style="opacity:0.8;" /> Register</a>

    @*--------</ User: NOT Logged In >--------*@

}

 

 

    <a href="?v=m">

        📱 Mobile 

    </a>

    <a href="?v=d">

        💻 Desktop

    </a>

 

    </div>

</div>