CODEWITHSUNDEEP
cssmenutoggle
Ing. Michal Hudak
Ing. Michal Hudak

Reputation: 5612

Responsive menu can't click on links after resize

I am making responsive navigation menu using css only.

I have toogle menu button to show menu after resizing screen.

Problem:

When I click on menu to scroll down and resize width of screen, (wider and back) menu is not clickable.

JSFIDDLE:

http://jsfiddle.net/mikehudak/bU8RW/

My goal is achieve this menu, but CSS ONLY ! ( js menu link)

CSS:

/* TOGGLE */

#slidebox {
    position: relative;
    padding: 0;
    margin: 0;
}

#toggle {
    display: none;
    text-align: left;
    height:30px;
    width: 14px;
    padding: 0 12px 0 12px;
    position:relative;
    z-index: 2;
    background: lightcoral;
}

@media screen and (max-width: 640px) { 
    #toggle {
        display: block !important;
    }
}

#toggle a { 
    position: absolute;
    text-decoration: none;
    line-height: 30px;
    font-size: 16px;
}

#box {
    padding: 0;
    margin: 0;
    display: block !important;
    position: absolute;
    top: calc(100%);
    right: calc(100%-30px);
    width: 100%;
}

@media screen and (max-width: 640px) { 
    #box {
        overflow: hidden;
        opacity: 0;
        position: absolute;
        top: calc(100%);
        right: calc(100%-30px);
        min-height: 100%;
        display: block !important;
    }
}

#slidebox:target #box {
    opacity:1;
    min-height: 100%;
    width: 100%;
}

#slidebox:target .top { 
    opacity:0;
    pointer-events: none;
}

Upvotes: 1

Views: 1085

Answers (1)

San
San

Reputation: 1247

This is jquery based multi drop down menu

http://jsfiddle.net/cancerian73/AxWwG/

.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}

Upvotes: 0

Related Questions