 [JavaScript][HTML][CSS] Przesunięcie Menu o "x" px |
| [JavaScript][HTML][CSS] Przesunięcie Menu o "x" px |
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: 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 |
 |
 
|
 |
|
Post
#2
|
|
|
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 |
|
|
|
martinii007 [JavaScript][HTML][CSS] Przesunięcie Menu o "x" px 7.04.2014, 14:22:52 
Turson position: fixed 7.04.2014, 14:25:13 Turson Sprawdzaj czy strona jest przesunięta na tyle by d... 7.04.2014, 15:04:28 
martinii007 Zrobiłem to podobnie, ale jednak troszeczkę inacze... 7.04.2014, 15:51:51  |
|
Aktualny czas: 8.10.2025 - 23:07 |
