How to put a submenu, on a menu I already have?

Asked

Viewed 1,382 times

3

I’m editing the blog, and I wanted to do a menu with submenus, but I don’t know exactly what makes it happen. I tried googling, but I got nothing. Only css tutorials appear, but nothing specific that can tell me which css code does that. I want to know exactly what makes a menu stick with a submenu... javascript, css, jquery.. Anything...

I’m using this code, which works great... http://tableless.com.br/header-responsivo-somente-com-css/

Only I want to put a submenu on it. As it is following:

header {
  min-height: 60px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 1px solid #ccc;
  background: #ECECEC;
  z-index: 2;
}

header ul {
  padding: 15px 10px 0 0;
}

header li {
  border-left: 1px solid #ccc;
}

header li:first-child {
  border: none;
}

header li a {
  display: block;
  padding: 0 10px;
  color: #999;
  font-size: 16px;
  line-height: 30px;
  text-decoration: none;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

header li a:hover {
  color: #333;
}
header > ul > li > ul{
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
-moz-opacity: 0.00;
opacity: 0.00;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
}
 
header > ul > li:hover > ul{
-moz-opacity: 1;
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
}
@media screen and (max-width: 767px) {
  header .control-nav {
    position: absolute;
    right: 20px;
    top: 20px;
    display: block;
    width: 30px;
    padding: 5px 0;
    border: solid #333;
    border-width: 3px 0;
    z-index: 2;
    cursor: pointer;
  }
  header .control-nav:before {
    content: "";
    display: block;
    height: 3px;
    background: #333;
  }
  header .control-nav-close {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: 1;
    background: rgba(0, 0, 0, 0.4);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
  header nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 250px;
    border-left: 1px solid #ccc;
    background: #fff;
    overflow-x: auto;
    z-index: 2;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
}

#control-nav:checked ~ .control-nav-close {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

#control-nav:checked ~ nav {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
<head>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no" />
</head>
<header>
  <h1 class="fL">
    <a href="#" title="">Teste</a>
  </h1>

  <nav class="fR">
    <ul class="l2">
      <li>
        <a href="#" title="">Menu</a>
      </li>
      <li>
        <a href="#" title="">Quem sou?</a>
        <li>
          <a href='#' title=''>Categorias</a>
          <ul>
            <li><a href='#' title='Sub Produto 1'>Sub Produto 1</a></li>
            <li><a href='#' title='Sub Produto 2'>Sub Produto 2</a></li>
            <li><a href='#' title='Sub Produto 3'>Sub Produto 3</a></li>
            <li><a href='#' title='Sub Produto 1'>Sub Produto 4</a></li>
            <li><a href='#' title='Sub Produto 2'>Sub Produto 5</a></li>
            <li><a href='#' title='Sub Produto 3'>Sub Produto 6</a></li>
            <li><a href='#' title='Sub Produto 1'>Sub Produto 7</a></li>
            <li><a href='#' title='Sub Produto 2'>Sub Produto 8</a></li>
            <li><a href='#' title='Sub Produto 3'>Sub Produto 9</a></li>
            <li><a href='#' title='Sub Produto 1'>Sub Produto 10</a></li>
            <li><a href='#' title='Sub Produto 2'>Sub Produto 11</a></li>
            <li><a href='#' title='Sub Produto 3'>Sub Produto 12</a></li>
          </ul>
        </li>
        <li>
          <a href="#" title="">Contato</a>
        </li>
        <li>
          <a href="#" title="">Anuncie</a>
        </li>
    </ul>
  </nav>
</header>

As I do now so that it only appears when I pass the mouse?

I’m sorry if I didn’t explain it properly!

javascript jquery html css

  • Behold this link. Teaches in 2 parts how to make a menu as you want. I have implemented this menu in past projects and worked perfectly, just read the instructions carefully.

  • You have a preference for being pure css/html or js?

  • Thanks @Diegofelipe this link helped me understand what I wanted.

  • @Celsomtrindade Whatever, I just wanted to understand what made it happen. But I did, thank you!

3 answers

2

Well, since you are using an example HTML and CSS, you could use this HTML and CSS and edit it the best way you want, follow the codes:

<div class="menu-container">
    <ul class="menu clearfix">
        <li><a href="#">Bruto</a>
            <!-- Nível 1 -->
            <!-- submenu -->
            <ul class="sub-menu clearfix">
                <li><a href="#">Sub</a>
                    <!-- Nível 2 -->
                    <!-- submenu do submenu -->
                    <ul class="sub-menu">
                        <li><a href="#">Sub Sub</a>
                            <!-- Nível 3 -->
                            <!-- submenu do submenu do submenu -->
                            <ul class="sub-menu">
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                            </ul><!-- submenu do submenu do submenu -->
                        </li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                    </ul><!-- submenu do submenu -->
                </li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
            </ul><!-- submenu -->
        </li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

And Follow the CSS:

body, 
.menu,
.sub-menu {
    margin: 0;
    padding: 0;
}
.clearfix:after{
    content: '.';
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
    overflow: hidden;
}
.menu,
.sub-menu {
    list-style: none;
    background: #000;
}
.sub-menu {
    background: #444;
}
.menu a {
    text-decoration: none;
    display: block;
    padding: 10px;
    color: #fff;
    font-family: sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
}
.menu li {
    position: relative;
}
.menu > li {
    float: left;
}
.menu > li:hover {
    background: #444;
}
.menu li:hover > .sub-menu {
    display: block;
}
.sub-menu {
    display: none;
    position: absolute;
    min-width: 150px;
}
.sub-menu li:hover {
    background: #555;
}
.sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

I found these codes in the following link:

https://www.todoespacoonline.com/w/2014/10/menu-html-com-css-com-submenu-e-subniveis/

I took the test and it works normally.

Up until.

  • I had seen this post tbm.. But since it was already ready and mine was also ready, then it became a little complicated to know what should change exactly. vllw anyway.

1

Just add these two classes to your CSS:

/* SUBMENU */
header nav ul li > ul{ /* esse último "ul" seria o submenu */
  display: none;
}

header nav ul li:hover > ul{
   display: block;
}

The first hides your Submenu when you enter the site.

And the second opens the Submenu when you hover over the main LINK. Note the use of hover.

  • Yes, that’s correct. I had seen it on the website they sent me.. I made an adaptation to mine and I understood, vllw.

0


The display:None hides the submenu and the display:block makes it appear... I put the following code in the css, and it worked. Note: The answers above are right. But here is how I put in my menu.

/*Escondendo o submenu*/
header li ul {
position: absolute;
display: none;
background-color: #ECECEC;
}
/*Estilo do submenu, e também fazendo-o aparecer.*/
header li ul a {
display: block;
text-decoration: none;
color: #777;
}

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.