Forum PHP.pl > [JavaScript][HTML][CSS] Przesunięcie Menu o "x" px

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][HTML][CSS] Przesunięcie Menu o "x" px

martinii007

7.04.2014, 14:22:52

Pracuję właśnie nad stroną z menu, które wraz z scrollem przemieszcza się również w dół.
Problem jest następujący: Menu nie ma być umieszczone całkiem na górze tylko 120px od góry. Jak zjeżdżam na dół to menu jest cały czas w tym miejscu (czyli 120px od góry). Stopniowo jak będę zjeżdżał na dół ma również znaleźć się na górze.

Trochę to zagmatwane, ale link wszystko wyjaśni:

Menu było razem z plikiem JS, jak go wywaliłem to wygląda to tak:

Bez JS

Z plikiem jeszcze gorzej:
Z plikiem JS

Kod CSS:

Kod

#menu {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #426d9c), color-stop(40%, #0f67a1), color-stop(100%, #1384d1));
background: -moz-linear-gradient(top, #f5d9a4, #530500, #f5d9a4);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
line-height: 50px;
text-align: center;
margin: 0 auto;
padding: 0;
width: 100%;
margin-top:120px;
}

#menu ul {
padding: 0;
}
#menu ul li {
list-style-type: none;
display: inline;
margin-right: 15px;
}
#menu ul li a {
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
padding: 3px 7px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-transition-property: color, background;
-webkit-transition-duration: 0.5s, 0.5s;
}
#menu ul li a:hover {
background: #01458e;
color: #ff0;
-webkit-transition-property: color, background;
-webkit-transition-duration: 0.5s, 0.5s;
}
.default {
width: 850px;
height: 50px;
box-shadow: 0 5px 20px #888;
-webkit-box-shadow: 0 5px 20px #888;
-moz-box-shadow: 0 5px 20px #888;
}
.fixed {
position: fixed;
top: -5px;
left: 0;
width: 100%;
box-shadow: 0 0 40px #222;
-webkit-box-shadow: 0 0 40px #222;
-moz-box-shadow: 0 0 40px #222;
z-index:1;
}

Kod HTML:

[HTML] pobierz, plaintext 
 
					<div id="menu" class="fixed">
						<ul>
							<li><a href="a">Home</a></li>
							<li><a href="b">CSS</a></li>
							<li><a href="d">Design</a></li>
							<li><a href="d">Development</a></li>
							<li><a href="d">Inspiration</a></li>
							<li><a href="d">Resources</a></li>
							<li><a href="d">Tutorials</a></li>
							<li><a href="q">WordPress</a></li>
						</ul>
					</div>     
 
[HTML] pobierz, plaintext

Reszta w kodzie źródłowych podanych linków, również kod JS. Drugi plik CSS odpowiada jedynie za layout.

Turson

7.04.2014, 14:25:13

position: fixed

martinii007

7.04.2014, 14:58:22

W sumie to próbowałem już wszystkiego

Jak dam absolute albo inną wartość, wtedy nie zjeżdża na dół, a właśnie ma zjechać, ale później te 120px tak jakby odjąć żeby zostało całkiem na górze gdzie logo jest.
Da się to zrobić nie wykorzystując JS?

Wklej do Try-editora --> Try Editor

Kod

<!DOCTYPE html>
<html>
<head>
<style>
#menu {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #426d9c), color-stop(40%, #0f67a1), color-stop(100%, #1384d1));
background: -moz-linear-gradient(top, #f5d9a4, #530500, #f5d9a4);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
line-height: 50px;
text-align: center;
margin: 0 auto;
padding: 0;
width: 100%;
margin-top:120px;
}

#menu ul {
padding: 0;
}
#menu ul li {
list-style-type: none;
display: inline;
margin-right: 15px;
}
#menu ul li a {
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
padding: 3px 7px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-transition-property: color, background;
-webkit-transition-duration: 0.5s, 0.5s;
}
#menu ul li a:hover {
background: #01458e;
color: #ff0;
-webkit-transition-property: color, background;
-webkit-transition-duration: 0.5s, 0.5s;
}
.default {
width: 850px;
height: 50px;
box-shadow: 0 5px 20px #888;
-webkit-box-shadow: 0 5px 20px #888;
-moz-box-shadow: 0 5px 20px #888;
}
.fixed {
position: fixed;
top: -5px;
left: 0;
width: 100%;
box-shadow: 0 0 40px #222;
-webkit-box-shadow: 0 0 40px #222;
-moz-box-shadow: 0 0 40px #222;
z-index:1;
}
</style>
</head>
<body>


    <div id="menu" class="fixed">
    <ul>
    <li><a href="a">Home</a></li>
    <li><a href="b">CSS</a></li>
    <li><a href="d">Design</a></li>
    <li><a href="d">Development</a></li>
    <li><a href="d">Inspiration</a></li>
    <li><a href="d">Resources</a></li>
    <li><a href="d">Tutorials</a></li>
    <li><a href="q">WordPress</a></li>
    </ul>
    </div>

                <div id="logo">
                            
                            <a href="index.html"  title="Elegantia Restaurant and Cafe Theme">
                                <center><img src="http://adapt-systems.pl/example/images/elegantia-logo.png" alt="Elegantia Restaurant and Cafe Theme"></center>
                            </a>
                </div>
                 <div class="slider-wrapper">

                <div class="flexslider">

                    <ul class="slides">
<img src="http://adapt-systems.pl/example/images/slider-image-three.jpg" alt="Elegantia Restaurant and Cafe Theme">
                    </ul>

                </div>

            </div>
            


            
            <div class="bottom-strip-wrapper">
                <div class="bottom-strip">
                    <p>
                        <span>Call 023 7526 8539  or Make Online Reservation</span><a href="reservation.html">MAKE  RESERVATION NOW</a>
                    </p>
                </div>
            </div>

            
            <div id="container">

                
                <div class="content full-width clearfix">

                    <div class="container-top"></div>

<img src="http://adapt-systems.pl/example/images/slider-image-three.jpg" alt="Elegantia Restaurant and Cafe Theme">

</body>
</html>

Turson

7.04.2014, 15:04:28

Sprawdzaj czy strona jest przesunięta na tyle by dołożyć pozycje fixed

[JAVASCRIPT] pobierz, plaintext 
var offset = $('#menu').offset();
$(window).scroll(function () {  
       var scrollTop = $(window).scrollTop(); // check the visible top of the browser
 
        if (offset<scrollTop) $('#menu').addClass('top-fixed');  
        else $('#menu').removeClass('top-fixed');  
});
[JAVASCRIPT] pobierz, plaintext

martinii007

7.04.2014, 15:51:51

Zrobiłem to podobnie, ale jednak troszeczkę inaczej

Kod

$(function(){

    var menu = $('#menu'),
        pos = menu.offset();

        $(window).scroll(function(){
            if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('fixed')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('fixed').addClass('default').fadeIn('fast');
                });
            } else if($(this).scrollTop() == 0 && menu.hasClass('default')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('default').addClass('fixed').fadeIn('fast');
                });
            }
        });

});

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.