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: Right-aligned dropdown menu

25.04.2018 (👁9578)


This code example creates a dropdown menu that opens and closes when an item is clicked.

The solution is implemented with HTML and Javascript.

 

Background:

There are some examples of dropdown menus in HTML and CSS styles. Unfortunately, these are always defined with absolute postions.

As a result, the simple drop-down menus always extend right over the edge of the picture.

 

Therefore, this example creates with the help of a small Javascript code a menu, which is based on opening the button and opens to the left.

 

You need a startup element with a unique ID for the dropdown menu like <a id="btnMenuLogin">

The link executes the javascript function for the click event: 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>

 

 

When opening the div element is determined, which should appear as a drop-down menu.

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

 

If this is not yet visible, then it will be visible

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

 

Afterwards, the drop-down menu is used to set the left distance at runtime using the style attributes

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

        menuPad.style.visibility = "visible"

 

 

 

Javascript code to open and close

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 to close

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() >--------

}

 

 

Complete HTML Asp.Net Core MVC code of DisplayView, provided the solution has been implemented in an Asp.Net MVC Razor concept.

@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>