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