CODEWITHSUNDEEP
htmlcss
craphunter
craphunter

Reputation: 981

Show menu with CSS and fade in

My output:

Home  | cat | Info
      |sub1
      | sub1sub1
      | sub1sub2
      |sub2
      | sub2sub1    


<div class="menu" >
    <span>
        <ul id="nav">
            <li><a href="#" >HOME</a></li>
            <li><a href="#">cat</a>
                <div class="subs">
                    <div class="wrp2">
                        <ul>
                            <li><a href="#" >sub1</a></li>
                                <ul>
                                    <li><a href="#" >sub1sub1</a></li>
                                    <li> <a href="#" >sub1sub2</a></li>
                                </ul>       
                        </ul>
                        <ul>
                            <li><a href="#" >sub2</a></li>
                                <ul><li><a href="#" >sub2sub1</a></li>
                             </li>
             <li><a href="#">Info</a></li>
        </ul>
    </span>
</div>

My CSS:

/* main menu styles */
.menu {

    background: none repeat scroll 0px 0px rgba(255, 255, 255, 0.65);
    text-align:center;
    width:100%;
    height:30px;
    text-transform: uppercase;
    padding-top: 8px;
    padding-bottom: 5px;
    font-size:19px;

}
.menu > span {
    display:inline-block;
    margin:0 auto;
}
#nav {
    display:inline;
    text-align:left;
    position:relative;
    list-style-type:none;
}
#nav > li {
    float:left;
    padding:0;
    position:relative;

}
#nav > li > a {

    color:black;
    display:block;

    padding:3px 10px;
    position:relative;
    text-decoration:none;
}
#nav > li > a:hover {
       background-color:rgba(255, 255, 255, 0.65);
    color:black;

}

#nav > li.selected  > a {
    z-index:2;
}
#nav li div {
    position:relative;
}
#nav li ul  a {
    font-size: 100%;
    color:black;
    display:block;
    margin-bottom:1px;
    padding:3px 5px;
    text-decoration:none;

}
#nav li ul a:hover{
    background-color:rgba(255, 255, 255, 0.65);
    color:black;
}

#nav li div div {


    padding:12px 0;
    display:none;

    margin:0;
    position:absolute;
    top:6px;
    background: none repeat scroll 0px 0px rgba(255, 255, 255, 0.65);
    z-index:999;
    width:auto;
}
#nav li div div.wrp2 {
    width:380px;
}
#nav .sep {
    left:190px;

    bottom:0;
    height:auto;
    margin:15px 0;
    position:absolute;
    top:0;
    width:1px;
}
#nav li div ul {
    padding-left:10px;
    padding-right:10px;
    position:relative;
    width:170px;
    float:left;
    list-style-type:none;

}
#nav li div ul li {
    margin:0;
    padding:0;
}
#nav li div ul li h3 {

    color:black;

    margin:0 5px 4px;

    padding-bottom:3px;
    padding-top:3px;
}
#nav li ul ul {
    padding:0 0 8px;
     padding-left:5px;
}
#nav li ul ul li {
    margin:0;
    padding:0;
}
#nav li ul ul li a {
    font-size: 90%;
    color:black;
    display:block;
    margin-bottom:1px;
    padding:3px 5px;
    text-decoration:none;


}
#nav li ul ul li a:hover{
    background-color:rgba(255, 255, 255, 0.65);
    color:black;
}

How can I make cat visible only with CSS and NO jquery. It should be: If I click on cat the submenu should come up. A fade-in/out effect would be great. Is it possible in general?

Upvotes: 0

Views: 105

Answers (3)

nullability
nullability

Reputation: 10675

If you want it on click, you can use the :target pseudoclass along with element IDs to control what is visible.

Update the relevant line in your HTML with a link to the ID:

<li id="cat"><a href="#cat">cat</a>

Then add some simple CSS:

li .subs {
    visibility:hidden;
    opacity:0;
    transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
li:target .subs {
    visibility:visible;
    opacity:1;
    transition-delay:0s;
}

You will also need to remove any display:none styles that will hide your submenus since we will be using visibility and opacity instead. This allows us to have a nice fade effect.

Upvotes: 0

Fuad Bro
Fuad Bro

Reputation: 17

ok. it is east just make an new class to sub menu whit display:none . it means that this block doesn't open it self . after that put another class in : hover and make display that as block

Upvotes: 1

Foda
Foda

Reputation: 58

yes you can do that > try to make dislay:none to the cat menu . them you must put : hover as dislay:block

Upvotes: 1

Related Questions