How to create a dropdown menu?

Question

How to create a dropdown menu?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I need to use this code to show multiple links in iframe that is just below.

But I need to show this part of the code that is the menu links in the menu format Suspense:

This part should appear in the drop-down menu

<a href="http://www.youtube.com/embed/8RGx6GYJ8WI" target="testframe">Um</a>
<a href="http://www.youtube.com/embed/AtHJm0PrMWs" target="testframe">Dois</a>

This part does not need to be modified:

<iframe width="500" height="500" src="about:blank" name="testframe"></iframe>

What's the easiest way to do this?

html dropdown

asked by anonymous 15.10.2015 / 23:06

2 answers

Hangouts on Air API How to pass the value of the @Html.DropDownList to the controller?

score 0 · Answer 1

The easiest way would be to use a framework such as Bootstrap that already has this component deployed or access a site that has several templates ready.

What you want to do is not difficult, maybe what gives a little more work is stylization but the behavior of showing / hiding the menu content is not complicated, it is only necessary to use the display / p>

.sub-menu {
  display: none
}

.sub-menu:hover, 
a:hover + .sub-menu { 
  display: block
}

<ul>
  <li>
    <a href='#'>Menu (parte visível)</a>
    <ul class='sub-menu'>
      <li><a href='#'>Opção A (parte oculta)</a></li>
      <li><a href='#'>Opção B (parte oculta)</a></li>
      <li><a href='#'>Opção C (parte oculta)</a></li>
    </ul>
  </li>
</ul>

.sub-menu { display: none } : Hides the internal contents of the menu, very simple.

a:hover + .sub-menu { display: block } : When the user hover over the link (which is the visible part), the next adjacent element that has class .sub-menu will be displayed, in case it is the content that was hidden.

.sub-menu:hover { display: block } : It's just to keep the content (previously hidden) visible while the user is hovering over the element. Otherwise, as soon as the user has taken the cursor from a:hover the submenu would no longer be shown.

There may be other techniques, but this is a generic form that makes it possible to create multiple levels as seen in snippet :

.sub-menu { display: none }

.sub-menu:hover, 
a:hover + .sub-menu, a { 
  display: block
}

<ul>
  <li>
    <a href='#'>Menu</a>
    <ul class='sub-menu'>
      <li>
        <a href='#'>Submenu 1</a>
        <ul class='sub-menu'>
          <li>
            <a href='#'>Submenu 2</a>
            <ul class='sub-menu'>
              <li>
                <a href='#'>Submenu 3...</a>
              </li> 
            </ul>
          </li> <!-- /submenu 2 -->
        </ul>
      </li> <!-- /submenu 1 -->
    </ul>
  </li> <!-- /menu -->
</ul>

A proposal for your case ...

You have not given much detail on how you need to do it, but considering that the menu will have only one level, this can be done like this:

.sub-menu {
  display: none
}

.sub-menu:hover,
a:hover + .sub-menu, a {
  display: block
}

<nav>
  <ul>
    <li>
      <a href='#'>Menu</a>
      <ul class='sub-menu'>
        <li>
          <a href="http://www.youtube.com/embed/8RGx6GYJ8WI" target="testframe">Um</a>
        </li>
        <li>
          <a href="http://www.youtube.com/embed/AtHJm0PrMWs" target="testframe">Dois</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

<iframe width="500" height="500" src="about:blank" name="testframe"></iframe>

score 0 · Answer 2

Here is a simple dropdown menu example:

*{
				margin:0px;
				padding:0px;
			}
			
			#header {
				margin:auto;
				width:500px;
				font-family:Arial, Helvetica, sans-serif;
			}
			
			ul, ol {
				list-style:none;
			}
			
			.nav {
				width:500px; 
				margin:0 auto; 
			}
 
			.nav > li {
				float:left;
			}
			
			.nav li a {
				background-color:#000;
				color:#fff;
				text-decoration:none;
				padding:10px 12px;
				display:block;
			}
			
			.nav li a:hover {
				background-color:#434343;
			}
			
			.nav li ul {
				display:none;
				position:absolute;
				min-width:140px;
			}
			
			.nav li:hover > ul {
				display:block;
			}
			
			.nav li ul li {
				position:relative;
			}
			
			.nav li ul li ul {
				right:-140px;
				top:0px;
			}

        <div id="header">
            <nav>
             
                <ul class="nav">
                    <li>
                        <a href="">Inicio</a>
                        <ul>
                            <li>
                                <a href="">Submenu1</a>
                            </li>
                            <li>
                                <a href="">Submenu2</a>
                            </li>
                            <li>
                                <a href="">Submenu3</a>
                            </li>
                            <li>
                                <a href="">Submenu4</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="">Serviço</a>
                        <ul>
                            <li>
                                <a href="">Submenu1</a>
                            </li>
                            <li>
                                <a href="">Submenu2</a>
                            </li>
                            <li>
                                <a href="">Submenu3</a>
                            </li>
                            <li>
                                <a href="">Submenu4</a>
                                <ul>
                                    <li>
                                        <a href="">Submenu1</a>
                                    </li>
                                    <li>
                                        <a href="">Submenu2</a>
                                    </li>
                                    <li>
                                        <a href="">Submenu3</a>
                                    </li>
                                    <li>
                                        <a href="">Submenu4</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="">Sobre</a>
                        <ul>
                            <li>
                                <a href="">Submenu1</a>
                            </li>
                            <li>
                                <a href="">Submenu2</a>
                            </li>
                            <li>
                                <a href="">Submenu3</a>
                            </li>
                            <li>
                                <a href="">Submenu4</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="">Contato</a>
                    </li>
                </ul>
            </nav>