Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript][HTML][CSS] Przesunięcie Menu o "x" px
martinii007
post
Post #1





Grupa: Zarejestrowani
Postów: 80
Pomógł: 0
Dołączył: 15.12.2011

Ostrzeżenie: (0%)
-----

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 
  1.  
  2. 					<div id="menu" class="fixed">
  3. 						<ul>
  4. 							<li><a href="a">Home</a></li>
  5. 							<li><a href="b">CSS</a></li>
  6. 							<li><a href="d">Design</a></li>
  7. 							<li><a href="d">Development</a></li>
  8. 							<li><a href="d">Inspiration</a></li>
  9. 							<li><a href="d">Resources</a></li>
  10. 							<li><a href="d">Tutorials</a></li>
  11. 							<li><a href="q">WordPress</a></li>
  12. 						</ul>
  13. 					</div>     
  14.  
[HTML] pobierz, plaintext


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

Ten post edytował martinii007 7.04.2014, 14:24:16
Go to the top of the page
+Quote Post
Turson
post
Post #2





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----

position: fixed
(IMG:style_emoticons/default/questionmark.gif)
Go to the top of the page
+Quote Post
martinii007
post
Post #3





Grupa: Zarejestrowani
Postów: 80
Pomógł: 0
Dołączył: 15.12.2011

Ostrzeżenie: (0%)
-----

W sumie to próbowałem już wszystkiego (IMG:style_emoticons/default/wink.gif) 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">
                            <!-- Website 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>
            <!--End Slider-->
            
            
            <!-- Bottom Strip -->
            <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>

            <!-- Start Container -->
            <div id="container">

                <!-- Content -->
                <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>


Ten post edytował martinii007 7.04.2014, 15:00:12
Go to the top of the page
+Quote Post
Turson
post
Post #4





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----

Sprawdzaj czy strona jest przesunięta na tyle by dołożyć pozycje fixed
[JAVASCRIPT] pobierz, plaintext 
  1. var offset = $('#menu').offset();
  2. $(window).scroll(function () {  
  3.        var scrollTop = $(window).scrollTop(); // check the visible top of the browser
  4.  
  5.         if (offset<scrollTop) $('#menu').addClass('top-fixed');  
  6.         else $('#menu').removeClass('top-fixed');  
  7. });
[JAVASCRIPT] pobierz, plaintext
Go to the top of the page
+Quote Post
martinii007
post
Post #5





Grupa: Zarejestrowani
Postów: 80
Pomógł: 0
Dołączył: 15.12.2011

Ostrzeżenie: (0%)
-----

Zrobiłem to podobnie, ale jednak troszeczkę inaczej (IMG:style_emoticons/default/wink.gif)


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');
                });
            }
        });

});
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 14:52
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn