Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you may not be able to execute some actions.

Please download a browser that supports JavaScript, or enable it if it's disabled (i.e. NoScript).

Clicking menu on cs

J
jules last edited by

Hello!
Tell me how to make a clip-floping menu, preferably css, with this particular feature: the menu is removed not only by pressing the reference but also by any space outside the menu. Example: such menus are often found in Yandex and Google.
Reply Quote 0
1 Reply Last reply

yajahira

Click menu

HTML код
<a class="main-item" href="javascript:void(0);" tabindex="1" >Открыть подменю</a> 
<ul class="sub-menu"> 
   <li><a href="#1">подпункт 1</a></li> 
   <li><a href="#2">подпункт 2</a></li> 
   <li><a href="#3">подпункт 3</a></li> 
</ul> 
CSS код

.sub-menu

{

display: none;

}

.main-item:focus ~ .sub-menu,

.main-item:active ~ .sub-menu,

.sub-menu:hover

{

display: block;

}

2
Posts

0
Views

Suggested Topics

I need a menu whose submenu appears above the menu
Software Programming • html5 css3 • • emmalee

2

0
Votes

2
Posts

0
Views

R

You should look for menu and submenu, so you find several ways to create, from pure css or with some jquery plugin (the most famous and easy is the bootstrap)I have a menu code and submenu I've had a while, I took a place but I've forgotten what it is, but I always have here with me. This is a pure menu:/* Reset CSS */ *, *:after, *:before{ margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; font-size: 14px; line-height: 1.5; } /* Fundo do menu */ .menu{ background: #000; } /* Remove as bolinhas do lado das listas */ .menu .menu-list, .menu .sub-menu{ list-style: none; } /* Configura todos os links do nosso menu */ .menu a{ color: #fff; text-decoration: none; display: block; cursor: pointer; text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing:0.2em; } /* Faz os <li>s ficarem na horizontal */ .menu > .menu-list > li{ float: left; position: relative; } /* Configura os links do menu principal */ .menu > .menu-list > li > a { padding: 20px; margin: 0 5px; background: #000; } /* Configura o fundo do menu principal quando com mouse hover */ .menu > .menu-list > li:hover a { background: #444; } /* Mostra o submenu no evento de mouse hover */ .menu > .menu-list > li:hover > .sub-menu { display: block; } /* Configura o estilo do submenu */ .menu > .menu-list > li > .sub-menu { position: absolute; top: 50px; left: 5px; background: blue; min-width: 200px; z-index: 1000; display: none; } /* Configura os links do submenu */ .menu > .menu-list > li > .sub-menu > li > a { padding: 10px 20px; } /* Clearfix para o menu */ .menu:after { content: '.'; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }<div class="menu"> <ul class="menu-list"> <li><a href="#">Home</a></li> <li> <a href="#">Menu</a> <ul class="sub-menu"> <li><a href="#">Sub Item1</a></li> <li><a href="#">Sub Item2</a></li> </ul> </li> <li><a href="#">Contato</a></li> </ul> </div>Now the question of positioning Bottom, I advise you Bootstrap, even has a property navbar who owns a class that already positions you at the bottom of your page.
E

How to integrate Adminlte with Asp.net Core without marking the clicked menu item stop working?
Software Programming • javascript c sharp asp.net mvc asp.net c languageore adminlte • • elysha

2

0
Votes

2
Posts

0
Views

P

You can do this that vc wants via CSS... But since I don't do much to help you, I'm gonna show you a way to do javascript.<script> function setMenuEffect(){ //Mapea o elemento do menu var el = $('nav-link'); //Remove o elemento active $.each(el, function(idx, item){ $(el).removeClass('active'); }); //Pega sua página (path) var page = getPathname(); //Adiciona a classe ao elemento correto $.each(el, function(idx, item){ if($(el).attr('data-menu') === page) $(el).parent().addClass('active'); }); } function getPathname(){ return $(location).attr('pathname'); } </script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li class="nav-item"> <a href="Usuarios/Index" class="nav-link" data-menu="Index"> <i class="far fa-circle nav-icon"></i> <p>Usuários</p> </a> </li>In short, vc will add in your menu "href", a property called 'data-menu' and add the value of your controller action, or in other words, your landing page. And the idea of the script is to sweep the 'nav-link' class present in your menu, uncheck any item that is with the 'active' class (which usually arrows the selected effect) and then sweep again looking for the value of the property equal to the pathname or current page and seal the 'active' class.
F

Incorrect work onchange js
Software Programming • javascript html jquery css • • fbio

2

0
Votes

2
Posts

0
Views

M

I hope that's right.The point is, it's an event. reset Only the behaviour of the user (introduced text and checked on input, textarea, etc.)♪ The main behavior was put in through the violin, so the reset cannot overturn it.One of the options is to capture the energies and compel all the input attribute to disabled. I rewrite everything on JQuery, it'll be faster. https://codepen.io/AndreyMyP/pen/wjzWrE $("#senderForm [type='reset']").mousedown(function() { $("input[type='radio']").prop("disabled", false); countText.text(maxCheckedButt - 1); switchOnChange(countAnyNews); });
R

What's the effect?
Software Programming • javascript html css scroll • • rosemadder

2

0
Votes

2
Posts

0
Views

K

The site ' s violinchont can be established as the back of the block and the background and structure of the mice (hover) can be changed. To make a change smooth, use a transition Alexey VladimirovThis comment helped me and I got the right result.
C

Closure after click
Software Programming • java android • • Cleofas

2

0
Votes

2
Posts

0
Views

T

My magic ball says you have a seal here:countSchet = +1;You're taking a unit instead of an increase. +1I mean, you need to use the operator. += or ++:countSchet += 1; //или //countSchet++;
S

The clicking menu should appear on the point
Software Programming • javascript css3 menu dropdown • • shizuka

2

0
Votes

2
Posts

0
Views

The css click can be traced by, for example, checkbox. You create a relevant input type=checkbox, hide it, and instead of button, you use a label that can be stylished as you want:.dropdown-content{ display: none; border:none; position: absolute; } .dropdown-content a { float: none; color: black; padding-top: 0.5em; text-decoration: none; text-align: left; font-size: 1em; } [type="checkbox"] { display: none; } .dropdown .dropbtn{ font-size: 1.8em; display: inline-block; cursor: pointer; border: 2px solid maroon; padding: 5px 10px; margin: 5px 0; border-radius: 15px; } #dropbtn:checked ~ .dropdown-content { display: block; } .navbar > ul { display: block; max-width: 400px; } .navbar a{ font-size: 1.8em; padding-top: 0; padding-bottom: 0; }<header> <img src="logo.jpg" class="logo"> <div class="navbar"><ul> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <input type="checkbox" id="dropbtn" /> <label for="dropbtn" class="dropbtn">Dropdown </label> <div class="dropdown-content"> <ul> <li><a href="#">Link 1</a> <li><a href="#">Link 2</a> <li><a href="#">Link 3</a> <li><a href="#">Link 4</a> <li><a href="#">Link 5</a></ul> </div> </div> <a href="#news">Blog</a></ul> </div> </header>But there's no need for any inputs and labels, everything's still there, it's added to the relevant hover:.dropdown-content{ display: none; border:none; position: absolute; } .dropdown-content a { float: none; color: black; padding-top: 0.5em; text-decoration: none; text-align: left; font-size: 1em; } .dropdown .dropbtn{ font-size: 1.8em; padding-top: 0; padding-bottom: 0; } .dropdown .dropbtn:hover ~ .dropdown-content, .dropdown-content:hover { display: block; } .navbar > ul { display: block; max-width: 400px; } .navbar a{ font-size: 1.8em; padding-top: 0; padding-bottom: 0; }<header> <img src="logo.jpg" class="logo"> <div class="navbar"><ul> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <button class="dropbtn">Dropdown </button> <div class="dropdown-content"> <ul> <li><a href="#">Link 1</a> <li><a href="#">Link 2</a> <li><a href="#">Link 3</a> <li><a href="#">Link 4</a> <li><a href="#">Link 5</a></ul> </div> </div> <a href="#news">Blog</a></ul> </div> </header>
E

Put black key on two whites
Software Programming • css • • elysha

2

0
Votes

2
Posts

0
Views

K

As I said in the comment I recommend you to make the white keys the size of the white key + black key and then put the top key with absolute position, here an example (I can't see the value of your variables so use percentages, you change it to what you need:* { margin: 0; padding: 0; box-sizing: border-box; } .container { height: 100vh; display: flex; justify-content: center; align-items: center; background: wheat; } .teclado { border: 2px solid red; height: 40vh; width: 60%; display: flex; } .c, .d, .e, .f { border: 2px solid blue; width: 25%; background: white; position: relative; } .c-black, .d-black, .f-black { background: black; position: absolute; top: 0; right: 0; width: 40%; height: 80%; }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="container"> <div class="teclado"> <div class="c"> <div class="c-black"></div> </div> <div class="d"> <div class="d-black"></div> </div> <div class="e"></div> <div class="f"> <div class="f-black"></div> </div> </div> </div> </body> </html>
J

I want to change the right-click menu on the VSCode editing screen
Software Programming • vsc languageode • • jonetta

2

0
Votes

2
Posts

0
Views

J

commandcommandsmust be d in the section.package.jsonHomecontributesPlease add the following:"commands": [ { "command": "editor.action.transformToLowercase", "title": "To lowercase" } ], By the way (in VSCode)editor/context以下のcommandIf you mouse over the part of this, you can see the help.
Change image by clicking, when you click back the initial image
Software Programming • javascript html jquery css • • inna

2

0
Votes

2
Posts

0
Views

D

Isa made this very simple model just to understand the dynamics. All in CSSBut I had to change your two <span> by <input> and one <label> using ::before Thus you can click the text or the image even and switch the image. The rest of the vc formatting does on the CSS of <label>See working on Snippethtml, body { width: 100%; height: 100%; margin: 10px; padding: 0; } label { cursor: pointer; } input[type="checkbox"]{ display: none; } input[type="checkbox"] + label::before { content: url(http://placeskull.com/40/40) } input[type="checkbox"]:checked + label::before { content: url(http://placecage.com/40/40) }<nav class="navbar navbar-fixed-left navbar-minimal animate open" role="navigation"> <div class="navbar-toggler animate"> <span class="menu-icon"></span> </div> <ul class="navbar-menu animate"> <li> <a href="#" class="animate"> <input type="checkbox" id="teste"> <label class="desc animate" for="teste">Tela Cheia</label> </li> </a> </ul> </nav>
G

I would like to know how to start the app from the menu without separating the exe of the application to start with the menu in C# Windows Form.
Software Programming • c sharp winforms • • gionna

2

0
Votes

2
Posts

0
Views

D

Program.csHomeMain()MethodApplication.Run(new Form1()); I think it is written like this. https://msdn.microsoft.com/ja-jp/library/ms157902(v=vs.110).aspx passed to the argumentFormView andFormclose. MoreApplicationThe modal dialog is realized in units.HomeApplicationis not a process unit but a thread unit concept. Therefore, if you start with different threads, you will not be able to cross-de .When opening each app screen from the menu screenvar thread2 = new Thread(() => Application.Run(new Form2())); thread2.SetApartmentState(ApartmentState.STA); thread2.Start(); If you start running on a new thread, the menu screen will not affect the modal of the app screen. Of course, in this exampleForm2When closedthread2CloseApplication.Exit()Homepgrho has been mentioned, so please apply. https://msdn.microsoft.com/ja-jp/library/ms157894(v=vs.100).aspx HomeThe Exit method will stop all the running message loops in all threads and close all the application windows. Call ExitThread to finish the current thread-only message loop.This is a method that stops the message loop of all threads as described. To を only the current thread https://msdn.microsoft.com/ja-jp/library/system.windows.forms.application.exitthread(v=vs.100).aspx It is also guided to use.NextAs a good measureAppDomainis suggested to separate, but still stop the processEnviroment.Exit()It’s powerless, even if it separates the process as in the question sentenceExitWindowEx()You can also stop the PC.In the end, I think that it is only a story of how I can tolerate.
Z

How do we record the page so that the page doesn't come up after reloading?
Software Programming • javascript html jquery css • • zymir

2

0
Votes

2
Posts

0
Views

R

Javaskipt is not needed for this. Use the anchor right behind the hat. <a name="top"></a> and add #topIn this case, if the user came out of the search, for example, a hat would appear if it was from the menu that you wanted.
G

Spacing out a Headline, body, and CTA button
Usability Testing • css cta • • guilherme

2

0
Votes

2
Posts

1
Views

K

Welcome! As for your question, the first option is the one I would go with. This is due to the fact that it's the way the Bootstrap library does it and it works rather well. If you view the Bootstrap homepage, and inspect the code with the F12 Developer Tools, you can see the box model highlighted on each element. Looking at the properties of the elements, and using the "computed" tab, you can see the bottom margins defined on each of the different types of page elements. To see this in action, go to the Bootstrap Home Page ( https://getbootstrap.com/ ). Right click on the big purple "Bootstrap" word and pull down to "Inspect". The F12 Tools will pop up, with the line of responsible HTML highlighted in the left pane. Also, If you also place your mouse over that highlighted line of code, the displayed element on the webpage will be highlighted with box model color shading. In this case it would be blue shading for the characters, and yellowish for the bottom-margin. To see the style properties that are being applied, switch the right F12 panel to computed, and then expand the "bottom-margin" property. It will show you the applicable styles, which ones are being ignored, and which one is applied. F12 Tools rock for working your CSS. Craig
How can I make a menu in bootstrap?
Software Programming • html css bootstrap • • Laycee

2

0
Votes

2
Posts

0
Views

E

Good friend,Things with boostrap are a little complicated if you're just starting,/* Code snippet by maridlcrmn for Bootsnipp.com Follow me on Twitter @maridlcrmn */ .navbar-brand { position: relative; z-index: 2; } .navbar-nav.navbar-right .btn { position: relative; z-index: 2; padding: 5px 20px; margin: 10px auto; transition: transform 0.3s; } .navbar .navbar-collapse { position: relative; overflow: hidden !important; } .navbar .navbar-collapse .navbar-right>li:last-child { padding-left: 22px; } .navbar .nav-collapse { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding-right: 120px; padding-left: 80px; width: 100%; } .navbar.navbar-default .nav-collapse { background-color: #f8f8f8; } .navbar.navbar-inverse .nav-collapse { background-color: #222; } .navbar .nav-collapse .navbar-form { border-width: 0; box-shadow: none; } .nav-collapse>li { float: right; } .btn.btn-circle { border-radius: 50px; } .btn.btn-outline { background-color: transparent; } .navbar-nav.navbar-right .btn:not(.collapsed) { background-color: rgb(111, 84, 153); border-color: rgb(111, 84, 153); color: rgb(255, 255, 255); } .navbar.navbar-default .nav-collapse, .navbar.navbar-inverse .nav-collapse { height: auto !important; transition: transform 0.3s; transform: translate(0px, -50px); } .navbar.navbar-default .nav-collapse.in, .navbar.navbar-inverse .nav-collapse.in { transform: translate(0px, 0px); } @media screen and (max-width: 767px) { .navbar .navbar-collapse .navbar-right>li:last-child { padding-left: 15px; padding-right: 15px; } .navbar .nav-collapse { margin: 7.5px auto; padding: 0; } .navbar .nav-collapse .navbar-form { margin: 0; } .nav-collapse>li { float: none; } .navbar.navbar-default .nav-collapse, .navbar.navbar-inverse .nav-collapse { transform: translate(-100%, 0px); } .navbar.navbar-default .nav-collapse.in, .navbar.navbar-inverse .nav-collapse.in { transform: translate(0px, 0px); } .navbar.navbar-default .nav-collapse.slide-down, .navbar.navbar-inverse .nav-collapse.slide-down { transform: translate(0px, -100%); } .navbar.navbar-default .nav-collapse.in.slide-down, .navbar.navbar-inverse .nav-collapse.in.slide-down { transform: translate(0px, 0px); } } Try that code, it's adapted by me for the menus.
J

Fixed menu cs
Software Programming • html cs • • jonetta

2

0
Votes

2
Posts

0
Views

E

Enough to ask your nav:nav { height: 60px; background: #c3deee; position:fixed; width: 80%; max-width: 900px; min-width: 700px; } Just like your box. They'll just have the same width independently of each other. Make sure. https://jsfiddle.net/OPTlMUS/gfvm5ex2/ changing the size of the window with the result.
J

Make a click shoot another click after 1 second
Software Programming • javascript jquery • • Jolied

2

0
Votes

2
Posts

0
Views

E

Can add a https://www.w3schools.com/jsref/met_win_settimeout.asp :$("#button1").click(function(){ setTimeout(function() { $("#button2").trigger('click'); }, 1000); }); $("#button2").click(function(){ $("#box").append('<p>Botao 2 clicado</p>'); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="box"> <button id="button1">Botao 1</button> <button id="button2">Botao 2</button> </div>The first parameter is a function with the commands you want to run after the given time.The second parameter is the time in milliseconds (in the case 1000ms = 1s).

Clicking menu on cs

Suggested Topics

I need a menu whose submenu appears above the menu Software Programming • html5 css3 • • emmalee

How to integrate Adminlte with Asp.net Core without marking the clicked menu item stop working? Software Programming • javascript c sharp asp.net mvc asp.net c languageore adminlte • • elysha

Incorrect work onchange js Software Programming • javascript html jquery css • • fbio

What's the effect? Software Programming • javascript html css scroll • • rosemadder

Closure after click Software Programming • java android • • Cleofas

The clicking menu should appear on the point Software Programming • javascript css3 menu dropdown • • shizuka

Put black key on two whites Software Programming • css • • elysha

I want to change the right-click menu on the VSCode editing screen Software Programming • vsc languageode • • jonetta

Change image by clicking, when you click back the initial image Software Programming • javascript html jquery css • • inna

I would like to know how to start the app from the menu without separating the exe of the application to start with the menu in C# Windows Form. Software Programming • c sharp winforms • • gionna

How do we record the page so that the page doesn't come up after reloading? Software Programming • javascript html jquery css • • zymir

Spacing out a Headline, body, and CTA button Usability Testing • css cta • • guilherme

How can I make a menu in bootstrap? Software Programming • html css bootstrap • • Laycee

Fixed menu cs Software Programming • html cs • • jonetta

Make a click shoot another click after 1 second Software Programming • javascript jquery • • Jolied

I need a menu whose submenu appears above the menu
Software Programming • html5 css3 • • emmalee

How to integrate Adminlte with Asp.net Core without marking the clicked menu item stop working?
Software Programming • javascript c sharp asp.net mvc asp.net c languageore adminlte • • elysha

Incorrect work onchange js
Software Programming • javascript html jquery css • • fbio

What's the effect?
Software Programming • javascript html css scroll • • rosemadder

Closure after click
Software Programming • java android • • Cleofas

The clicking menu should appear on the point
Software Programming • javascript css3 menu dropdown • • shizuka

Put black key on two whites
Software Programming • css • • elysha

I want to change the right-click menu on the VSCode editing screen
Software Programming • vsc languageode • • jonetta

Change image by clicking, when you click back the initial image
Software Programming • javascript html jquery css • • inna

I would like to know how to start the app from the menu without separating the exe of the application to start with the menu in C# Windows Form.
Software Programming • c sharp winforms • • gionna

How do we record the page so that the page doesn't come up after reloading?
Software Programming • javascript html jquery css • • zymir

Spacing out a Headline, body, and CTA button
Usability Testing • css cta • • guilherme

How can I make a menu in bootstrap?
Software Programming • html css bootstrap • • Laycee

Fixed menu cs
Software Programming • html cs • • jonetta

Make a click shoot another click after 1 second
Software Programming • javascript jquery • • Jolied