[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Меню codrops (стильное меню)
Форум PHP программистов > Дизайн и верстка
Stasonix
28.09.2011 - 12:45
вот менюшка (live-code):
menu codrops

на всякий случай вот листинг:

<ul id="navigation">
            <li class="home"><a href=""><div>Home</div></a></li>
            <li class="about"><a href=""><div>About</div></a></li>
            <li class="search"><a href=""><div>Search</div></a></li>
            <li class="photos"><a href="http://udruga.500mb.net/menu.php" target="_blank"><div>menu jquery</div></a></li>
            <li class="rssfeed"><a href="http://narod.ru/disk/26054239001/paralax-slider.rar.html"><div>PARALAX</div></a></li>
            <li class="podcasts"><a href=""><div>Podcasts</div></a></li>
            <li class="contact"><a href=""><div>Contact</div></a></li>
     </ul>


/* СТИЛЬНОЕ МЕНЮ CODROPS */
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0;
    left: 0;
    list-style: none;
    z-index:999999;
    width:100%;
    
}
ul#navigation li {
    width: 13.9%;
    display:inline;
    float:left;  
    height: 100%;    
    margin-left: 0.4%;
    
}
ul#navigation li a {
    display: block;
    float:left;
    width: 99%;
    height: 3%;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align: center;
    padding-top:85%;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);  
    
    overflow: hidden;
    
}
ul#navigation li a:hover{
     background-color: black; /* #CAE3F2 */
}
ul#navigation li a div{
    letter-spacing:2px;
    font-size:14px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;      
    font-weight: bold;
    margin-bottom: 6%;
    overflow: hidden;
    
}


    
  $(function() {
                var d=300;
                $('#navigation a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-79%'
                    },d+=150);
                });

                $('#navigation > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-5%'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-79%'
                    },200);
                }
            );
            });


В блоке где прописано JQuery при стягивании-расстягивании блока текст перелазит на новую строчку, что значительно портит всю картину, я пробовал overflow:hidden; но оно тут до лампочки, как этого избежать?

п.с. сайт заточен под резину, так что менять проценты на px я не могу.









Спустя 17 минут, 26 секунд (28.09.2011 - 12:02) redreem написал(а):
замените пробелы в тексте на &nbsp;

Спустя 2 минуты, 11 секунд (28.09.2011 - 12:04) Winston написал(а):
Как-то так ?
Свернутый текст
/* СТИЛЬНОЕ МЕНЮ CODROPS */
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0;
    left: 0;
    list-style: none;
    z-index:999999;
    width:100%;
    
}
ul#navigation li {
    width: 13.9%;
    display:inline;
    float:left;  
    height: 100%;    
    margin-left: 0.4%;
    
}
ul#navigation li a {
    display: block;
    float:left;
    width: 99%;
    height: 3%;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align: center;
    padding-top:85%;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);  
    display:table;
    /*overflow: hidden;*/
    
}
ul#navigation li a:hover{
     background-color: black; /* #CAE3F2 */
}
ul#navigation li a div{
    letter-spacing:2px;
    font-size:14px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;      
    font-weight: bold;
    margin-bottom: 6%;
    /*overflow: hidden;*/
    display:table;
}

Спустя 7 минут, 47 секунд (28.09.2011 - 12:12) Stasonix написал(а):
Цитата (redreem @ 28.09.2011 - 09:02)
замените пробелы в тексте на &nbsp;

оригинально, и что потом в каждом новом выдуманном пункте прийдется вручную пробелы ставить, не оч логичное решение

Спустя 2 минуты, 18 секунд (28.09.2011 - 12:14) Stasonix написал(а):
Цитата (Winston @ 28.09.2011 - 09:04)
Как-то так ?

ничего не изменилось, кажется только хуже стало, текст теперь не по центру, а по левому краю выровнялся, мне кажется тут только font-size изменять вариант подойдет, но я просто подумал что можно и проще как-нть чем писать на js функцию.

Спустя 2 минуты, 50 секунд (28.09.2011 - 12:17) Winston написал(а):
В ul#navigation li a
Добавь
white-space: nowrap;

Спустя 7 минут, 39 секунд (28.09.2011 - 12:25) Winston написал(а):
Если вот-так перепишешь, то не надо будет overflow использовать и текст не будет вылазить за границы div'a
Свернутый текст
/* СТИЛЬНОЕ МЕНЮ CODROPS */
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0;
    left: 0;
    list-style: none;
    z-index:999999;
    width:100%;
}
ul#navigation li {
    width: 13.9%;
    display:inline;
    float:left;  
    height: 100%;    
    margin-left: 0.4%;
    display:table;
}
ul#navigation li a {
    display: block;
    float:left;
    width: 99%;
    height: 3%;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align: center;
    padding-top:85%;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);  
    display:table;
    white-space: nowrap;
    
}
ul#navigation li a:hover{
     background-color: black; /* #CAE3F2 */
}
ul#navigation li a div{
    letter-spacing:2px;
    font-size:14px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;      
    font-weight: bold;
    margin-bottom: 6%;
    /*overflow: hidden;*/
        text-align: center;
}
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2025 Invision Power Services, Inc.