Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] design vertical menu with image

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #166520
    Amit12x
    Participant

    i am working on my college project, for which i have to add vertical menu bar in my project. i have searched a lot on Google , but could not find a code for creating vertical menu with image.
    can you please tell me , how can create this type of menu .
    i want to create my menu like this

    http://i.stack.imgur.com/5fm3L.png

    arrow is not mandetory.

    #166617
    Paulie_D
    Member

    That would work although I would probably use a background image rather than having the image inline.

    Much like we’d help you with your homework perhaps you could show us what you have tried so far…in a Codepen.io example.

    #166627
    Amit12x
    Participant

    @Paulie : thanks for your valuable suggestion.

    i did it like this .

    
    <ul id="css3menu1" class="topmenu">
        <li class="topfirst"><a class="pressed" href="#" style="width:98px;"><img src="images/home.png" alt=""/>Home</a></li>
        <li class="topmenu"><a href="#" style="width:98px;">&nbsp;</a></li>
        <li class="topmenu"><a href="#" style="width:98px;"><img src="images/home.png" alt=""/>Work</a></li>
        <li class="topmenu"><a href="#" style="width:98px;">&nbsp;</a></li>
        <li class="topmenu"><a href="#" style="width:98px;"><img src="images/home.png" alt=""/>Team</a></li>
        <li class="topmenu"><a href="#" style="width:98px;">&nbsp;</a></li>
        <li class="topmenu"><a href="#" style="width:98px;"><img src="images/home.png" alt=""/>Blog</a></li>
        <li class="topmenu"><a href="#" style="width:98px;">&nbsp;</a></li>
        <li class="topmenu"><a href="#" style="width:98px;"><img src="images/home.png" alt=""/>Reach Us</a></li>    
    </ul>
    #166633
    Paulie_D
    Member

    So is this solved?

    Do you need anything else?

    #166635
    Amit12x
    Participant

    no , it’s solved .

    here is the css of for that.

    ul#css3menu1{
        margin:0;list-style:none;padding:0 3px 3px;background-color:#424542;border-width:2px;border-style:solid;border-color:#FFF;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;font-size:0;z-index:999;position:relative;display:block;float:left;}
    ul#css3menu1 li{
        display:block;white-space:nowrap;font-size:0;}
    ul#css3menu1>li{
        margin:3px 0 0;}
    ul#css3menu1 a:active, ul#css3menu1 a:focus{
        outline-style:none;}
    ul#css3menu1 a{
        display:block;vertical-align:middle;text-align:left;text-decoration:none;font:14px Open Sans Condensed,Arial,Helvetica,sans-serif;color:#FFF;cursor:pointer;padding:10px;background-color:#424542;background-image:none;background-repeat:repeat;border-width:1px 0 0 0;border-style:solid;border-color:#424542;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
    ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
        background-color:#F8F8F8;border-color:#424542;border-style:solid;color:#1FAFAF;background-image:url(../images/mainbk.png);text-decoration:none;}
    ul#css3menu1 img{
        border:none;vertical-align:middle;margin-right:10px;}
    ul#css3menu1 li.topfirst>a{
        border-width:0;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}
    ul#css3menu1 li.topmenu>a{
        -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.