[CSS, HTML] Menu podążające za stroną


(Michalmatma32) #1

Witam.

Na początku zaznaczam, że nie chodzi mi o sam fixed. Chcę uzyskać taki efekt jak na stronie głównej dobrych programów. Mam znacznik nav odsunięty 100px od góry i teraz chcę żeby menu "przykleiło" się do krawędzi wyszukiwarki, ale dopiero jak zjedzie się te 100px w dół (podczas przesuwania przez te 100px nav ma zostać na miejscu). Jak to zrobić? Szukałem w google, ale wszędzie było same fixed.


(Grzelix) #2

 

lub affix efekt od bootstrap:

 

http://joomlamastery.com/14-menu-or-div-snap-on-top-effect-the-power-of-bootstrap-s-affix


(Michalmatma32) #3
<div id="nav-container">
			<nav> 
			<ul class="nav">
			  <li class="active"><a href="index.html">Strona główna</a></li>
			  <li><a href="">Regulamin</a></li>
			  <li><a href="">Zespoły</a></li>
			  <li><a href="">Bibliografia</a></li>
			  <li><a href="">Wskazówki</a></li>
			  <li><a href="">Kontakt</a></li>
			  <li class="last"><a href="">Logowanie<span class="sf-sub-indicator"><!-- <img src="black_file.gif"alt=""> --></span></a>
			  <ul style="background:#EFDFBB; width: 112px" >
			  <li><form method="post" class="login">
					<input type="text" name="login" placeholder="login">
					<input type="password" name="haslowpisane" placeholder="hasło">
					<input type="submit" id="log" value="Zaloguj">
			</form></li>
			</ul></li>
			</ul>
		   </nav> 
		   
		     <div class="clear"></div>
  </div>

To jest kod mojego menu w html.

.login {
	left: 50px;
}

input {
	width: 100px;
}

#log { /*przycisk logowania*/
	width: 60px;
	position: relative;
	left: 0px;
}

/* .clear{clear:both}
br.clear{clear:both;margin-top:-15px} 
	div.main-container{display:block;text-align:left;margin:0 0 1px;}*/
	div.main-container h1,div.main-container h2,div.main-container h3,div.main-container h4,div.main-container h5,div.main-container h6{font-family:Artifika, Arial, Helvetica, sans-serif;font-weight:400;line-height:normal;margin:0 0 15px;padding:0}
	.nav li:hover{visibility:inherit}
	.nav li {position:relative;display:inline-block;zoom:1;*display:inline;}
	.nav a{display:block;position:relative;color:#333!important;text-decoration:none;padding:.75em 1em}
	.nav li:hover ul,.nav li.sfHover ul{left:0;top:2.5em;z-index:99}
	.nav a,.nav a:visited,.nav li.active li a{color:#333}
	.nav a.sf-with-ul{padding-right:2.25em}
	.nav li ul a.sf-with-ul{padding-right:1em}
	.nav,.nav *{list-style:none;margin:0;padding:0}
	.nav ul{position:absolute;top:-999em;width:10em}
	.nav ul li{width:100%}
	.nav li.active li a{color:#333}
	.nav li.active a,.nav li:hover,.nav li.sfHover,.nav a:focus,.nav a:hover,.nav a:active{background:#EFDFBB} /*#e0e0e0-szary kolor przy najechaniu myszka */
	.sf-sub-indicator{position:absolute;display:block;right:.25em;top:1.05em;width:10px;height:10px;text-indent:-999em;overflow:hidden;background:url("nav_arrows.png") no-repeat -10px -100px}a > .sf-sub-indicator{top:.8em;background-position:0 -100px}a:focus > .sf-sub-indicator,a:hover > .sf-sub-indicator,a:active > .sf-sub-indicator,li:hover > a > .sf-sub-indicator,li.sfHover > a > .sf-sub-indicator{background-position:-10px -100px}.nav ul a > .sf-sub-indicator{background-position:0 0}
	nav
	{
	border:0;font-size:100%;vertical-align:baseline;margin:0;padding:0;
	}
	
	div.main-container {
	position:relative;
	top: 15px; /*pozycja menu w pionie*/
	}

	#nav-container
	{
	position:relative;display:block;width:960px;margin:0 auto;
	}
 	#nav-container
	{
	 z-index:1000; 
	font-size:14px;
	text-align:center;
	
	text-transform:uppercase;
	border-top:1px dashed #666;
	border-bottom:1px dashed #666;
	}

A tu w CSS (wybaczcie kawałek pisany ciągiem, ale kopiowałem to z jakiegoś szablonu, gdzie ktoś dla uprzykrzenia życia pisał wszystko ciągiem). Z tego poradnika co podałeś wkleiłem JS w head i kod CSS do mojego. Niestety nie zadziałało.

Próbowałe i nie działa, ale pewnie robie coś źle, bo oprócz HTML i CSS reszta to dla mnie czarna magia.


(Grzelix) #4

Szczerze to html i css też dla ciebie jeszcze zbyt jasne nie jest.

 

Po pierwsze powinieneś uporządkować to co już masz. Straszny bałagan tu widzę. Jak znam życie to 2/3 kodu tutaj wrzuconego jest zbędne.

 

A teraz do meritum jeśli próbowałeś porady z pierwszego linka i

  1. prawidłowo podpiąłeś bibliotekę js i wpąłeś skrypt (możesz skopiować z kodu strony demo,

  2. dodałeś klasę f-nav odpowiedzialną za przypięcie menu po obniżeniu scrolla o 136 pixeli (wartość z przykładu)

i ci nie działa to winna leży w "sile" reguł css'a. Sprawdzając w inspect tool'u możesz zauważyć że style z klasy f-nav są nadpisane przez style dla id nav-container.

Dzieje się to dlatego, że style dla id są silniejsze niż dla klasy. Więcej info: http://mynthon.net/howto/webdev/css-sila-selektorow.html

 

Mam nadzieję że dobrze trafiam i pomogę tym wpisem.


(Michalmatma32) #5

Dzięki. Udało się.

P.S. Wiem, że nie umiem dobrze CSS i HTML, a nawalenie kodu w CSS jest, ponieważ robię tą stronę z kolegą i każdy z nas dopisuje swoje.