CODEWITHSUNDEEP
javascriptjqueryhtmlcss
pichuik
pichuik

Reputation: 53

Showing Images inside a dropdown menu

I'd like to show images when hovering on a list item inside a dropdown menu, I can't quite do it the way I want it with css alone, I'd like to show images on the right when hovering on the corresponding name on the left.

The code i've wrote so far doesn't work because of the relation parent-children that must have when using css, I'm quite inexperienced so maybe the solution is really easy, excuse me if that's the case.

html:

<body>
<div class="menu-wrap">
    <nav class="menu">
        <ul class="clearfix">
            <li class="current-item"><a href="#">Home</a>
            </li>
            <li><a href="#">Collaboratori</a>                
                <div class="sub-menu-collab">
                    <div>
                         <ul class="listanomi">
                            <li><a href="#">Paolo</a></li>
                            <li><a href="#">Luca</a></li>
                            <li><a href="#">Anna</a></li>
                            <li><a href="#">Mara</a></li>
                        </ul>
                        <img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Paolo">
                        <img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Luca">              
                        <img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Anna">
                        <img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Mara">
                    </div>
                </div>
            </li>
    </nav>
</div>

</body>

css:

.clearfix:after {
    display:block;
    clear:both;
}

/*----- Menu Outline -----*/
.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background:#3e3436;
}

.menu {
    width:1000px;
    margin:0px auto;
}

.menuimage {
    float: right;
    clear: none;
    padding: 40px;
    opacity: 1;
    position: relative;
    transition:all linear 0.15s;
}

.menu > .listanomi > li:hover .menuimage{
    opacity: 1;
}

.listanomi {
    float: left;
}

.menu li {
    margin:0px;
    list-style:none;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    text-decoration: none;
}

.menu a {
    transition:all linear 0.15s;
    color:#a1a1a1;
}

.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
    color:#e8e8e8;
}

.menu .arrow {
    font-size:11px;
    line-height:0%;
}

/*----- Top Level -----*/
.menu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    font-size:16px;
    text-decoration: none;
}

.menu > ul > li > a {
    padding:10px 40px;
    display:inline-block;
    text-shadow:0px 1px 0px rgba(0,0,0,0.4);
    text-decoration: none;
}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background:#2e2728;
    text-decoration: none;
}

/*----- Bottom Level -----*/
.menu li:hover .sub-menu-collab, .menu li:hover .sub-menu-mat, .menu li:hover .sub-menu-arte {
    z-index:1;
    opacity:1;
}

.sub-menu-collab {
    width:150%;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0%;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:#2e2728;
    text-decoration: none;
}


.sub-menu-collab li, .sub-menu-mat li, .sub-menu-arte li {
    display:block;
    font-size:16px;
    text-decoration: none;
}

.sub-menu-collab li a, .sub-menu-mat li a, .sub-menu-arte li a {
    padding:10px 30px;
    display:block;
    text-decoration: none;
}

.sub-menu-collab li a:hover, .sub-menu-mat li a:hover, .sub-menu-arte li a:hover {
    background:#3e3436;
    text-decoration: none;
}

.current-item a {
    background:#3e3436;
}

code on jsfiddle: code

thanks!

Upvotes: 2

Views: 88

Answers (3)

Downhillski
Downhillski

Reputation: 2655

You made two mistakes:

  1. when using parent-child relationship in css, you need to point the child who is the img element in this case to the parent.

<li> <a href="#">Anna</a> <img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Anna"> </li>

  1. CSS select should be

    .menu .listanomi > li:hover .menuimage { opacity: 1; }

.listanomi is not the direct child of .menu.

Note: I also changed img float to absolute to top right.

Working sample here:

.clearfix:after {
  display: block;
  clear: both;
}
/*----- Menu Outline -----*/

.menu-wrap {
  width: 100%;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
  background: #3e3436;
}
.menu {
  width: 1000px;
  margin: 0px auto;
}
.menuimage {
  clear: none;
  padding: 40px;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  transition: all linear 0.15s;
}
.menu .listanomi > li:hover .menuimage {
  opacity: 1;
}
.listanomi {
  float: left;
}
.menu li {
  margin: 0px;
  list-style: none;
  font-family: 'Playfair Display', serif;
  text-transform: uppercase;
  text-decoration: none;
}
.menu a {
  transition: all linear 0.15s;
  color: #a1a1a1;
}
.menu li:hover > a,
.menu .current-item > a {
  text-decoration: none;
  color: #e8e8e8;
}
.menu .arrow {
  font-size: 11px;
  line-height: 0%;
}
/*----- Top Level -----*/

.menu > ul > li {
  float: left;
  display: inline-block;
  position: relative;
  font-size: 16px;
  text-decoration: none;
}
.menu > ul > li > a {
  padding: 10px 40px;
  display: inline-block;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
  text-decoration: none;
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
  background: #2e2728;
  text-decoration: none;
}
/*----- Bottom Level -----*/

.menu li:hover .sub-menu-collab,
.menu li:hover .sub-menu-mat,
.menu li:hover .sub-menu-arte {
  z-index: 1;
  opacity: 1;
}
.sub-menu-collab {
  width: 150%;
  padding: 5px 0px;
  position: absolute;
  top: 100%;
  left: 0%;
  z-index: -1;
  opacity: 0;
  transition: opacity linear 0.15s;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  background: #2e2728;
  text-decoration: none;
}
.sub-menu-mat {
  width: 120%;
  padding: 5px 0px;
  position: absolute;
  top: 100%;
  left: 0%;
  z-index: -1;
  opacity: 0;
  transition: opacity linear 0.15s;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  background: #2e2728;
  text-decoration: none;
}
.sub-menu-arte {
  width: 150%;
  padding: 5px 0px;
  position: absolute;
  top: 100%;
  left: -50%;
  z-index: -1;
  opacity: 0;
  transition: opacity linear 0.15s;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  background: #2e2728;
  text-decoration: none;
}
.sub-menu-collab li,
.sub-menu-mat li,
.sub-menu-arte li {
  display: block;
  font-size: 16px;
  text-decoration: none;
}
.sub-menu-collab li a,
.sub-menu-mat li a,
.sub-menu-arte li a {
  padding: 10px 30px;
  display: block;
  text-decoration: none;
}
.sub-menu-collab li a:hover,
.sub-menu-mat li a:hover,
.sub-menu-arte li a:hover {
  background: #3e3436;
  text-decoration: none;
}
.sub-menu-collab li a:visited,
.sub-menu-mat li a:visited,
.sub-menu-arte li a:visited {
  text-decoration: none;
  color: #989898;
}
.menu li a:visited {
  text-decoration: none;
  color: #999999;
}
.menu li a:active {
  text-decoration: none;
  color: #999999;
}
.current-item a {
  background: #3e3436;
}
<body>
  <div class="menu-wrap">
    <nav class="menu">
      <ul class="clearfix">
        <li class="current-item"><a href="#">Home</a>
        </li>
        <li><a href="#">Collaboratori</a>	
          <div class="sub-menu-collab">
            <div>
              <ul class="listanomi">
                <li><a href="#">Paolo</a><img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Paolo">
                </li>
                <li><a href="#">Luca</a><img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Luca">
                </li>
                <li><a href="#">Anna</a><img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Anna">
                </li>
                <li><a href="#">Mara</a><img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Mara">
                </li>
              </ul> 
            </div>
          </div>
        </li>
        <li><a href="#">Materie di Competenza</a>
          <ul class="sub-menu-mat">
            <li><a href="#">penale</a>
            </li>
            <li><a href="#">civile</a>
            </li>
            <li><a href="#">punto c</a>
            </li>
            <li><a href="#">punto d</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Arte</a>
          <ul class="sub-menu-arte">
            <li><a href="#">mostre</a>
            </li>
            <li><a href="#">eventi</a>
            </li>
            <li><a href="#">punto c</a>
            </li>
            <li><a href="#">punto d</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Contatti</a>
        </li>
      </ul>
    </nav>
  </div>

</body>

Upvotes: 1

Adrian
Adrian

Reputation: 532

If you want to show an image corresponding to the title, you can use jQuery as example : 

$(".item").hover(function() {
   $(".menuimage[title='"+$(this).html()+"']").css("opacity", 1);
  }, function() {
    $(".menuimage[title='"+$(this).html()+"']").css("opacity", 0);
});

Working demo

Upvotes: 0

ScaisEdge
ScaisEdge

Reputation: 133400

try this way 

<body>
    <div class="menu-wrap">
        <nav class="menu">
            <ul class="clearfix">
                <li class="current-item"><a href="#">Home</a>
                </li>
                <li><a href="#">Collaboratori</a>                
                    <div class="sub-menu-collab">
                        <div>
                             <ul class="listanomi">
                                <li><a href="#"><img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Paolo">Paolo</a></li>
                                <li><a href="#"><img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Luca">Luca</a></li>
                                <li><a href="#"><img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Anna">Anna</a></li>
                                <li><a href="#"><img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Mara">Mara</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
        </nav>
    </div>

</body>

Upvotes: 0

Related Questions