Autor Zpráva
Michal Sebek
Profil
Mám responzivní menu a při PC verzi zasahuje na druhý řádek. Jak se toho mám zbavit?
Kód:
index.html:
<!DOCTYPE html>
<html>
    <head>
        <title>Zkouška menu</title>
        <link rel="stylesheet" href="webdata/css/fonts.css" type="text/css">
        <link rel="stylesheet" href="webdata/font-awesome/css/font-awesome.min.css" type="text/css">
        <link rel="stylesheet" href="webdata/css/style.css" type="text/css">
        <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
        <script type="text/javascript" src="webdata/js/menu.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    </head>
    <body>
        <div class="menu">
            <ul>
                <li><a href='index.html' class="actual"><i class="fa fa-home fa-lg"></i>&nbsp;Home</a></li>
                <li><a href='#about-me'><i class="fa fa-users"></i>&nbsp;O nás</a></li>
                <li><a href='#gallery'>Gallery</a></li>
                <li><a href='#blog'>Blog</a></li>
                <li><a href='#links'>Links</a></li>
                <li><a href='#sitemap'>Sitemap</a></li>
            </ul>
        </div>
    </body>
</html>

style.css:
.menu {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: normal;
    font-size: 1em;
    display:block;
    position:relative;
    width:100%;
    padding:0px;
    margin:0 auto !important;
    text-align: center;
    line-height:19px !important;
}

.menu a {
    color:#ebebeb;
    text-decoration:none;
}
.menu-main-list, .menu .menu-main-list li {
    margin:0px;
    padding:0px;
}
.menu ul {
    display:block;
    width:auto !important;
    margin:0 auto !important;
    overflow:hidden;
    list-style:none;
}

.menu-main-list li {
    display:inline;
    padding:0px;
    margin:0px !important;
}
.menu-toggled {
    display:none;
    width:100%;
    position:relative;
    overflow:hidden;
    margin:0 auto !important;
}
.menu-button:hover {
    cursor:pointer;
}
.menu-toggled ul {
    display:none;
    margin:0px !important;
    padding:0px !important;
}
.menu-toggled ul li {
    display:block;
    margin:0 auto !important;
}

.menu-main-list li a {
    display:inline-block;
    padding:8px 30px 8px 30px;
    margin:0px -3px 0px -3px;
    text-shadow:1px 1px 1px #333333;
    background-color:#444444;
    border-left:1px solid #555555;
}
.menu-main-list li a:hover {
    background:orange;
}
.menu-main-list li:first-child a {
-webkit-border-top-left-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.menu-main-list li:last-child a {
    -webkit-border-top-right-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.menu-toggled {
    width:100%;
    background-color:#555555;
    min-height:36px;
    border-radius:6px;
}
.menu-toggled-controls {
    display:block;
    height:36px;
    color:white;
    text-align:left;
    position:relative;
    border-radius:6px;
}
.menu-toggled-title {
    position:relative;
    top:9px;
    left:15px;
    color:white;
    text-shadow:1px 1px 1px black;
}
.menu-button {
    display:block;
    position:absolute;
    right:15px;
    top:8px;
}

.menu-button span {
    display:block;
    margin-top:4px;
    height:2px;
    background:white;
    width:24px;
}
.menu-toggled ul li a {
    display:block;
    width:100%;
    background-color:#555555;
    text-align:center;
    padding:10px 0px 10px 0px;
    border-bottom:1px solid #333333;
    border-top:1px solid #777777;
    text-shadow:1px 1px 1px #333333;
}
.menu-toggled ul li a:active {
    background:darkorange;
    border-bottom:1px solid #444444;
    border-top:1px solid #444444;
}

.menu .actual {
    background:darkorange;
}

menu.js:
function responsiveMobileMenu() {    
    $('.menu').each(function() {
        $(this).children('ul').addClass('menu-main-list');
        var $width = 0;
        $(this).find('ul li').each(function() {
            $width += $(this).outerWidth();
        });
        if ($.support.leadingWhitespace) {
            $(this).css('max-width' , $width*1.05+'px');
        } else {
            $(this).css('width' , $width*1.05+'px');
        }
    });
}

function getMobileMenu() {
    $('.menu').each(function() {    
        var menutitle = $(this).attr("data-menu-title");
        if ( menutitle == "" ) {
            menutitle = "Menu";
        } else if ( menutitle == undefined ) {
            menutitle = "Menu";
        }
        var $menulist = $(this).children('.menu-main-list').html();
        var $menucontrols ="<div class='menu-toggled-controls'><div class='menu-toggled-title'>" + menutitle + "</div><div class='menu-button'><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></div></div>";
        $(this).prepend("<div class='menu-toggled menu-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>");
    });
}

function adaptMenu() {
    $('.menu').each(function() {
        var $width = $(this).css('max-width');
        $width = $width.replace('px', ''); 
        if ( $(this).parent().width() < $width*1.05 ) {
            $(this).children('.menu-main-list').hide(0);
            $(this).children('.menu-toggled').show(0);
        } else {
            $(this).children('.menu-main-list').show(0);
            $(this).children('.menu-toggled').hide(0);
        }
    });
}

$(function() {
    responsiveMobileMenu();
    getMobileMenu();
    adaptMenu();
     
    $('.menu-toggled, .menu-toggled .menu-button').click(function(){
        if ( $(this).is(".menu-closed")) {
            $(this).find('ul').stop().show(300);
            $(this).removeClass("menu-closed");
        } else {
            $(this).find('ul').stop().hide(300);
            $(this).addClass("menu-closed");
        }
    });
});

$(window).resize(function() {
    adaptMenu();
});
Michal Sebek
Profil
Tak problém vyřešen, v javascriptu jsem místo
if ($.support.leadingWhitespace) {
            $(this).css('max-width' , $width*1.05+'px');
} else {
            $(this).css('width' , $width*1.05+'px');
}
dal
if ($.support.leadingWhitespace) {
            $(this).css('max-width' , $width*1.4+'px');
} else {
            $(this).css('width' , $width*1.4+'px');
}
Michal Sebek
Profil
Ale mám další problém. Když do menu dám o jednu položku víc, tak to dává mobilní menu i na PC. A když to číslo zvednu, tak to nepomáhá. Co mám dělat?


(Ale to se týká spíš JS)

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: