How to create side navigation

HTML & CSS
1

I’m having trouble creating a side bar navigation using images. The first image is the side image that should go all the way down and the other images go inside of it. The page should look like this:

1221×512 40.6 KB

HTML Asset 2010 is the log grayish bar and the images after that should go inside of that bar:

       <div class="sidenav">
         <a href="#"><img src="images/Asset%2010.png" /></a>
         <a href="#"><img src="images/Asset%208.png" /></a>
         <a href="#"><img src="images/Asset%205.png" /></a>
         <a href="#"><img src="images/Asset%206.png" /></a>
         <a href="#"><img src="images/Asset%201.png" /></a>
         <a href="#"><img src="images/Asset%207.png" /></a>
         <a href="#"><img src="images/Asset%204.png" /></a>

This is not the exact css I want to use but I’m just trying to get it work properly:

   .sidenav {
       height: 100%;
       width: 200px;
       position: fixed;
       z-index: 1;
       top: 0;
       left: 0;
       background-color: #111;
       overflow-x: hidden;
     padding-top: 20px;
   }

.sidenav a {
    padding: 6px 6px 6px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
   }

    .sidenav a:hover {
        color: #f1f1f1;
    }
2

Hi,
I guess that “side image” actually is the link images’ container div “sidenav”. :slight_smile:

Seems you are on the right track anyway, how does it look now?

3

Hi. What is the rest of your HTML and CSS. This doesn’t give any inside in what your after. You have a link?

edit: What are the properties (z-index, position, etc) of the other content. Does .sidenav has a parent? If yes what are the properties of the parent? Does it have a position declared? etc etc etc

4

Try removing display: block from .sidenav a

5 
<div class="sidenav">
         <a href="#"><img src="images/Asset%2010.png" /></a>
         <a href="#"><img src="images/Asset%208.png" /></a>

The other images after it will not go inside because they are siblings.

It sounds like you should be setting Asset%2010.png as a background image on the parent .sidenav if you want the others inside of it.

You have it nested in an anchor right now, is it a link or not?

What would that accomplish?
Other than reverting the anchors back to inline elements.

2 Likes
6

<off topic>
Just so ya know, empty tags like “img”, do not require a closing slash. That is a carry-over from XHTML It has never been required in HTML (although very early Netscape gave it a try).
</off topic>

1 Like
7

If the images are to be stacked in top of each other then maybe there is a conflict with `overflow-x: hidden;‘

8

Sounds like you are confusing overflow-x with overflow-y

According to the screenshot of “what the page should look like”, The OP wants them stacked, so display:block on the anchors IS what’s needed, when anchors are not nested in a block parent such as a <li>.

overflow-x: hidden removes sideways scrolling and still allows for scrolling on the “y” axis when it’s needed.

@mldardy, Since this is for navigation it should really be using a UL for a “List of Links” too.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.sidenav {
  /*height: 100%; remove this and add bottom:0*/
  width: 200px;
  position: fixed;
  z-index: 1;
  top:0; left:0; bottom:0; /*add bottom:0*/
  background: #111 url('http://lorempixel.com/output/nature-h-c-216-1029-3.jpg') repeat-y center; /*or use Asset-2010.png as a background image*/
  overflow-x: hidden;
  margin:0;
  padding:0;
  list-style:none;
}
.sidenav li {
  margin: 2em 0;
}
.sidenav a {
  /*padding: 6px 6px 6px 32px;*/
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;

  /*rules below for testing without images*/
  background:lime;
  width:50%;
  margin:auto;
  padding: 10px;
  box-sizing: border-box;
}
.sidenav a img {
  display:block;
  margin:auto;
}
.sidenav a:hover {
  color: #f1f1f1;
}
</style>

</head>
<body>

<ul class="sidenav">
  <li><a href="#"><img src="images/Asset%208.png" alt="broken image"></a></li>
  <li><a href="#"><img src="images/Asset%205.png" alt="broken image"></a></li>
  <li><a href="#"><img src="images/Asset%206.png" alt="broken image"></a></li>
  <li><a href="#"><img src="images/Asset%201.png" alt="broken image"></a></li>
  <li><a href="#"><img src="images/Asset%207.png" alt="broken image"></a></li>
  <li><a href="#"><img src="images/Asset%204.png" alt="broken image"></a></li>
</ul>

</body>
</html>
1 Like
9

You will, of course, remember to add appropriate alt text to the images so that your menu is usable by screen readers, or if the images fail to load for some reason.

10

Hopefully, it will be more than alt text. Those images don’t convey anything to me.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.