Autor Zpráva
i-cash
Profil
#1 · Zasláno: 9. 12. 2012, 12:18:25
Odpovědět Citovat
Ahojte, upravuji menu pro svů web, a jsem v koncích. Mám několika-úrovňové menu, a od třetí úrovně bych chtěl aby se menu nevysouvalo dolů, ale doprava, protože vždy odsune zbytek menu níž, což je problém když mám na 3.lvl menu víc věcí. Zato kdyby se vysunulo hezky doprava a neodsouvalo by nikam nic, tak by to bylo o dost přehlednějsí. Prohlédnout funkčnost menu si můžete prohlédnout ZDE

CSS: 
#nav {
    float: right;
    margin-top: 32px;
    position: relative;
}

#nav ul {
    list-style: none;
    margin: 0;
}
#nav li {
    position: relative;
}

#nav li a {
    display: block;
    padding: 5px 10px;
    font-weight: 400;
    text-decoration:none;
    color: whitesmoke;
}

#nav_menu > li {
    float: left;
    margin: 0 13px;
}

#nav #nav_menu > li > .sub-menu {
    display: none;
    background: rgba(35,35,35,0.75) none;
       margin-top: 5px;
    padding: 8px 10px 5px;
    position: absolute;
    left: 0;
    top: 25px;
    float: left;
    width: 200px;
    z-index: 9999;
    border-radius: 0 3px 3px 3px;
    -moz-border-radius: 0 3px 3px 3px;
    -webkit-border-radius: 0 3px 3px 3px;
    -khtml-border-radius: 0 3px 3px 3px;
}

#nav #nav_menu > li .main_nav_arrow {
    background: url(../images/down-arrow.png) no-repeat center center;
    height: 5px;
    width: 8px;
    display: inline-block;
    position: relative;
    margin: 0 10px 0 10px;
    top: -1px;
}

#nav #nav_menu > li > .sub-menu .nav_arrow {
    background: url(../images/nav_arrow.png);
    height: 11px;
    left: 10px;
    position: absolute;
    top: -10px;
    width: 14px;
    display: none;
}

#nav #nav_menu > li > .children {
     display: none;
    background: rgba(35,35,35,0.75) none;
       margin-top: 5px;
    padding: 8px 10px 5px;
    position: absolute;
    left: 0;
    top: 25px;
    float: left;
    width: 200px;
    z-index: 9999;
    border-radius: 0 3px 3px 3px;
    -moz-border-radius: 0 3px 3px 3px;
    -webkit-border-radius: 0 3px 3px 3px;
    -khtml-border-radius: 0 3px 3px 3px;
}

#nav #nav_menu > li > .children .nav_arrow {
    background: url(../images/nav_arrow.png);
    height: 11px;
    left: 10px;
    position: absolute;
    top: -10px;
    width: 14px;
    display: none;
}

#nav #nav_menu > li > a {
    color: #b3b3b3;
    display: inline-block;
    font-size: 16px;
    line-height: 20px;
    cursor: pointer;
    padding: 5px 0px 5px 10px;
    position: relative;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -o-transition: all 200ms ease;

}

#nav #nav_menu > .current_page_item > a {
    color: #FFF;
}

#nav #nav_menu > li:hover > a {
    color: #FFF;
    text-shadow: 0 0 1em  #FFF, 0 0 1em  #FFF;
    background: transparent;
    padding: 5px 0px 5px 10px;
    font-weight: 500;
}

#nav #nav_menu > .dropdown_hover:hover > a {
    color: #FFF;
    background: rgba(35,35,35,0.75) none;
    padding: 5px 0px 5px 10px;
    font-weight: 500;
    border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    -khtml-border-radius: 3px 3px 0 0;
}

#nav #nav_menu li:hover > ul {
    display: block;
}

#nav ul ul a {
    color: #b3b3b3;
    font-size: 14px;
    border-bottom: 1px solid #3D3D3D;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -o-transition: all 200ms ease;

}
#nav ul ul a:hover {
    color: #FFF;
    text-shadow: 0 0 1em  #FFF, 0 0 1em  #FFF;
}

#nav .parent-menu {
    background: url(../images/down-menu-arrow.png) no-repeat right center;
}
#nav .parent-menu:hover {
    background: url(../images/down-menu-arrow-hover.png) no-repeat right center;
}
#nav ul ul ul a {
    background: url(../images/indent-menu-arrow.png) no-repeat left center;
}
#nav ul ul ul a:hover {
    background: url(../images/indent-menu-arrow-hover.png) no-repeat left center;
}
#nav ul ul ul a {
    text-indent: 10px;
}
#nav ul ul ul ul a {
    text-indent: 20px;
}
#nav ul ul ul ul ul a {
    text-indent: 30px;
}

Java Script: 
jQuery(document).ready(function($){
    $('#nav_menu').mobileMenu();
});

jQuery(document).ready(function($){
        
        
    $(".es-carousel img").hover(function(){
        $(this).fadeTo("fast", 0.7); 
    },function(){
           $(this).fadeTo("fast", 1.0); 
    });

    
});

jQuery(document).ready(function($){

    $("#gallery ul a:hover img").css("opacity", 1);
    $("#portfolio_wrap .portfolio_caption").css("opacity", 0);
    
    $("#portfolio_wrap a").hover(function(){
        $(this).children("img").fadeTo("fast", 0.3);
        
        $(this).children(".portfolio_caption").fadeTo("fast", 1.0);
        
    },function(){
           $(this).children("img").fadeTo("fast", 1.0);
           $(this).children(".portfolio_caption").fadeTo("fast", 0);
    });
    
    $(".featured-image img").hover(function(){
        $(this).fadeTo("fast", 0.75); 
    },function(){
           $(this).fadeTo("fast", 1.0); 
    });
    
    $(".recent-posts-image img").hover(function(){
        $(this).fadeTo("fast", 0.75); 
    },function(){
           $(this).fadeTo("fast", 1.0); 
    });
});

jQuery(document).ready(function($) {
    $('#nav_menu .sub-menu').hide();
    $('#nav_menu > li > .sub-menu').append('<span class="nav_arrow"/>');
    $("#nav_menu ul").find(".sub-menu").prev().addClass("parent-menu");
    
    $('#nav_menu > li').children('.sub-menu').parent().addClass("dropdown_hover");
    $('#nav_menu > li').children('.sub-menu').prev().append('<span class="main_nav_arrow"/>');
    
    $("#nav_menu > li").hover( function() {
        $(this).children(".sub-menu").show();
    }, function () {
        $(this).find(".sub-menu").hide();
    });
    
    $("#nav_menu > li > .sub-menu li").hover( function() {
        $(this).children(".sub-menu").slideDown("fast");
    }, function () {
    });
});

jQuery(document).ready(function($) {
    $('#nav_menu .children').hide();
    $('#nav_menu > li > .children').append('<span class="nav_arrow"/>');
    $("#nav_menu ul").find(".children").prev().addClass("parent-menu");
    
    $('#nav_menu > li').children('.children').parent().addClass("dropdown_hover");
    $('#nav_menu > li').children('.children').prev().append('<span class="main_nav_arrow"/>');
    
    $("#nav_menu > li").hover( function() {
        $(this).children(".children").show();
    }, function () {
        $(this).find(".children").hide();
    });
    
    $("#nav_menu > li > .children li").hover( function() {
        $(this).children(".children").slideDown("fast");
    }, function () {
    });
});
i-cash
Profil
#2 · Zasláno: 9. 12. 2012, 18:30:10
Odpovědět Citovat
Tak mám progress, vypadá to tak, že tato část JS vůbec nefunguje. 
jQuery(document).ready(function($) {
    $('#nav_menu .children').hide();
    $('#nav_menu > li > .children').append('<span class="nav_arrow"/>');
    $("#nav_menu ul").find(".children").prev().addClass("parent-menu");
    
    $('#nav_menu > li').children('.children').parent().addClass("dropdown_hover");
    $('#nav_menu > li').children('.children').prev().append('<span class="main_nav_arrow"/>');
    
    $("#nav_menu > li").hover( function() {
        $(this).children(".children").show();
    }, function () {
        $(this).find(".children").hide();
    });
    
    $("#nav_menu > li > .children li").hover( function() {
        $(this).children(".children").slideDown("fast");
    }, function () {
    });
});

Protože když na stránce dám prozkoumat prvek, tak mi to hlásí, že všechny položky menu se identifikujou jako sub-menu, což zařizuje tato část JS 
jQuery(document).ready(function($) {
    $('#nav_menu .sub-menu').hide();
    $('#nav_menu > li > .sub-menu').append('<span class="nav_arrow"/>');
    $("#nav_menu ul").find(".sub-menu").prev().addClass("parent-menu");
    
    $('#nav_menu > li').children('.sub-menu').parent().addClass("dropdown_hover");
    $('#nav_menu > li').children('.sub-menu').prev().append('<span class="main_nav_arrow"/>');
    
    $("#nav_menu > li").hover( function() {
        $(this).children(".sub-menu").show();
    }, function () {
        $(this).find(".sub-menu").hide();
    });
    
    $("#nav_menu > li > .sub-menu li").hover( function() {
        $(this).children(".sub-menu").slideDown("fast");
    }, function () {
    });
});

Takžde stačí neco změnit tak, aby ta část co identifikuje children fungovala a je to. má někdo nějakej nápad?
Časová prodleva: 11 let

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0