CODEWITHSUNDEEP
htmlcss
Ruddy
Ruddy

Reputation: 9923

Turning whole <li> into links

There is a lot of these around but I cant find a way to do it without messing up the menu itself.

So I was messing about and came up with a menu I rather liked so I would like to keep it, as I was only messing about and seeing what I could come up with I didn't think about it and make the links.

Anything I try now seems to mess up the display: inline-block;.

HTML:

<div id="menu">
    <ul>
        <li class="item1"><span>Home</span><div></div>
        </li
        ><li class="item2"><span>About</span><div></div>

        </li
        ><li class="item3"><span>Games</span><div></div>

        </li
        ><li class="item4"><span>Data</span><div></div>

        </li
        ><li class="item5"><span>Films</span><div></div>

        </li
        ><li class="item6"><span>Contact</span><div></div>

        </li>
    </ul>
</div>

CSS:

#menu {
    margin-top: 60px;
    text-align: center;
    height: 200px;
    min-width: 975px;
    position: relative;
}
ul {
    position: absolute;
    top: 0;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    color: #fff;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-size: 30px;
}
li {
    width: 150px;
    height: 160px;
    display: inline-block;
    transition:height 1s;
}
li:hover {
    height: 190px;
    cursor: pointer;
}
li span {
}
a {
    display:block;
}
.item1 {
    background: #00CC99;
}
.item1 div {
    width: 100%;
    height: 80%;
    background: url(https://cdn1.iconfinder.com/data/icons/ecqlipse2/HOME.png) no-repeat bottom;
}
.item2 {
    background: #006699;
}
.item2 div {
    width: 100%;
    height: 80%;
    background: url(https://cdn1.iconfinder.com/data/icons/ecqlipse2/BOOK.png) no-repeat bottom;
}
.item3 {
    background: #0066CC;
}
.item3 div {
    width: 100%;
    height: 80%;
    background: url(https://cdn1.iconfinder.com/data/icons/ecqlipse2/COUNTERSTRIKE.png) no-repeat bottom;
}
.item4 {
    background: #0066FF;
}
.item4 div {
    width: 100%;
    height: 80%;
    background: url(https://cdn1.iconfinder.com/data/icons/ecqlipse2/NETWORK%20-%20HDD.png) no-repeat bottom;
}
.item5 {
    background: #6666FF;
}
.item5 div {
    width: 100%;
    height: 80%;
    background: url(https://cdn1.iconfinder.com/data/icons/ecqlipse2/FILE%20-%20MOVIE.png) no-repeat bottom;
}
.item6 {
    background: #CC33FF;
}
.item6 div {
    width: 100%;
    height: 80%;
    background: url(https://cdn1.iconfinder.com/data/icons/ecqlipse2/PHONE.png) no-repeat bottom;
}

Sorry to include a large amount of CSS but I found the different ways I have tried tend to break all kinds of different things.

DEMO HERE

Stuff I have tried:

I have tried to put a inside height: 100%; width: 100%; and put it on top using z-index then hiding it but this does not seem to work.

Playing a around each of the <li> as I had no idea how it would react, this also seemed to fail. If I get the "display: block;" it would work but mess the menu up.

Upvotes: 0

Views: 243

Answers (2)

Luciano
Luciano

Reputation: 1299

without messing around too much with your code, you could get rid of those empty div if you don't have any other plans for them. To keep the html structure correct and valid the a element should go inside the li, not outside. Then changing the html to:

<li class="item1"><a><span>Home</span></a>

and the CSS:

.item1 {
background: #00CC99 url(https://cdn1.iconfinder.com/data/icons/ecqlipse2/HOME.png) no-repeat bottom;
}

Should solve it without breaking your design.

demo:(first li only) http://jsfiddle.net/Xf96N/

Upvotes: 0

nkmol
nkmol

Reputation: 8091

So you are trying to make link of every block? Why not put the stuff that represents the block into a anchor?

<div id="menu">
    <ul>
        <li class="item1">
            <a href="test">
                <span>Home</span>
                <div></div>
            </a>
            ...

Where you just set the height of the anchor to 100%:

#menu a
{
    height: 100%;
    text-decoration: none;
    color: white;
}

jsFiddle

Note that i only did this with the home button

Upvotes: 1

Related Questions