Перейти к содержанию
mgorban

фиксированное меню

Рекомендуемые сообщения

Здравствуйте. подскажите пожалуйста Как правильно сделать меня?

Есть фиксированное меню, пункты которого переносят на разные места одной страницы, все бы ничего но когда перехожу на очередной пунтк, часть текст скрывается под этим самым меню (а точне 100px)

вот пример скриншота как получается:

http://c2n.me/3kwFPbp

а вот так должно быть:

http://c2n.me/3kwFUs6

  <div class="menu">
        <div class="menu-box">
            <div style="width:200px; text-align:left;">
                <a href="#"><img src="img/logo-epica.png" /></a>
            </div>
            <div style="width:600px;">
                <ul class="nav">
                    <li><a href="#work">Наши работы</a></li>
                    <li><a href="#uslugi">Услуги</a></li>
                    <li><a href="#">Акция</a></li>
                    <li><a href="#">Как мы работаем</a></li>
                    <li><a href="#">О нас</a></li>
                    <li><a href="#">Что мы делаем</a></li>                  
                </ul>
            </div>
            <div style="width:200px; text-align:right;">
                <p style="font-size:33px;">+ 38 067 694 66 88</p>
                <p style="font-size:28px;">design@epicagroup.ru</p>
            </div>
        </div>
    </div>

СSS

.menu {
    text-align:center;
    overflow:hidden;
    max-width:100%;
    height:100px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding-top:0px;
    margin:0 auto;
    background-image:url(../img/bg.jpg);
    box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .8);
}

.menu-box {
    white-space:nowrap;
    font-family:'Open Sans Condensed', sans-serif;
}

.menu-box div {
    display:inline-block;
    padding-top:10px;
}

 

Изменено пользователем mgorban

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

посмотреть бы на сам сайт

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

посмотреть бы на сам сайт

:( так он еще на компе может я что-то могу скриншотом показать?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

скорей всего смотрите скрипт который отвечает за прокрутку к нужному пункту

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

скорей всего смотрите скрипт который отвечает за прокрутку к нужному пункту

ээ... я делал без скрипта.. со скриптом у меня не получилось...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
<script type="text/javascript">
$(document).ready(function () {	
$(function () {	

$(window).scroll(function () {
		
 if ($(this).scrollTop() > 300) {	
 $("#scroller").show();	
 $('#scroller').css({'background-color':'rgba(0,0,0,0.10)'});
 }
   
 else {	
 $("#scroller").fadeOut()
 }	
 
});

$(window).scroll(function () {

 if($(this).scrollTop() > 800) {
 $('#scroller').css({'background-color':'rgba(255,255,255,0.10)'}) 
 }	

});

 $("#scroller").click(function () {	
 $("body,html").animate({scrollTop: 0}, 300);
 
return false }); 

}); 
});
</script>

Вот так я себе делал, пример на сайте можете глянуть bigsam.com.ru

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

Вот так я себе делал, пример на сайте можете глянуть bigsam.com.ru

 

Если я выложу щасть сайта (он у меня еще не доделан) вы сможете для моего меню сделать скрипт.???.. Ну хоть убейте не получается у меня, уже кучу разных вариантов перепробовал.. (((

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

вот, я выложил. сильно не пугайтесь там много чего не доделано, но сейчас главное - это страдальческое меню http://epica-1.mg-portfolio.ru

Помогите пожалуйста.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

#work
расположи выше

или
http://itchief.ru/lessons/bootstrap-3/38-bootstrap-3-navigation-menu

Изменено пользователем AWARO

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

navbar-fixed-top таое

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.