Glavni menu vedno na vrhu strani (frozen) @ Slo-Tech

Forum » Izdelava spletišč »
Glavni menu vedno na vrhu strani (frozen)

Glavni menu vedno na vrhu strani (frozen)

Dr.S :: 15. avg 2014, 08:24

Na tejle strani mi je všeč efekt ko glavni menu (HOME,SERVICES,...) vedno ostane viden na strani (kljub brskanju navzdol).

Ta efekt menuja bi rad dodal na našo stran za glavni menu (O NAS, VADITE DOMA,...), tako za uvodno stran kot podstrani.

Kje najdem primerno skripto in kam jo vpišem?

Hvala.

Mipe :: 15. avg 2014, 08:53

Tole uporablja: http://getbootstrap.com/

Yacked2 :: 15. avg 2014, 09:32

Kaj pa če bi naredi s css ?

nav{
	 position: fixed;
	 top: 0;
	 left: 0;
	 height: 45px;
	 width: 100%;
	 border-top-style: solid;
	 font-size:16px;
}

Korak naprej ni vedno ustrezen...sploh če si na robu prepada!

Mipe :: 15. avg 2014, 09:35

Ne, če bolje pogledaš, je na vrhu portret avtorice, menu pa je na dnu. Šele ko scrollaš mimo portreta, se menu prilepi na vrh. Je treba nekaj javascripta za ta trik.

Dr.S :: 15. avg 2014, 17:07

Yacked2 sem probal tvojo varianto.
Css za menu sem spremenil iz:

#header{height:90px;background:url("images/header.png") repeat-x scroll 0 0 #EEEEEE;}

v

#header{position:fixed;width:100%;height:90px;background:url("images/header.png") repeat-x scroll 0 0 #EEEEEE;}

Težava je v tem, ker mi header (menu) potem skrije-prekrije zgornji del strani (na 1.strani je to napis Dobrodošli! in opis pod tem, na ostalih straneh je približno 90px zgornje strani).

Nekako bi moral celo stran zamikniti nižje. Ideja?

Yacked2 :: 16. avg 2014, 00:21

Dr.S je 15. avg 2014 ob 17:07 izjavil:

Yacked2 sem probal tvojo varianto.
Css za menu sem spremenil iz:

#header{height:90px;background:url("images/header.png") repeat-x scroll 0 0 #EEEEEE;}

v

#header{position:fixed;width:100%;height:90px;background:url("images/header.png") repeat-x scroll 0 0 #EEEEEE;}

Težava je v tem, ker mi header (menu) potem skrije-prekrije zgornji del strani (na 1.strani je to napis Dobrodošli! in opis pod tem, na ostalih straneh je približno 90px zgornje strani).

Nekako bi moral celo stran zamikniti nižje. Ideja?

5min googlanja: http://techtalk.virendrachandak.com/mak...

Korak naprej ni vedno ustrezen...sploh če si na robu prepada!

alexa-lol :: 16. avg 2014, 10:56

To je simple..

Vanilla JS: zaznaš onscroll in potem pogledaš kakšna je pozicija scrollbara in na podlagi višine zaslona in višine headerja izračunaš kateri je tisti break-point ko headerju dodaš nek class, ki elementu dodeli position fixed oz. lahko se tudi z absolutnim pozicioniranjem igraš sam nima smisla.

jQuery: enako le da rabiš manj kode

alexa-lol :: 16. avg 2014, 11:13

Za stran zamaknit nižje je pa margin-top: ..toliko px kot je velik header..px

To foro z position: fixed in margin-top lahko vidiš tu.. http://bootflat.github.io/documentation... .. je pa v taki poziciji že od začetka.

position-fixed: .navbar-custom
margin-top: .docs-header

Fora z position fixed in absolute je ta da ti element izključiš iz normalnega izrisa strani in taki elementi za ostale ne obstajajo, oz. ostali se izrišejo kot da jih ni.

Zgodovina sprememb…

spremenil: alexa-lol (16. avg 2014 ob 11:16)

Dr.S :: 17. avg 2014, 11:31

alexa-lol hvala za odgovor. Simpl zate,
meni še kar ni jasno kako to naredim.

Trenutno je css za menu:
#header{height:90px;background:url("images/header.png") repeat-x scroll 0 0 #EEEEEE;}

Kaj dodam oz. še popravim?

alexa-lol :: 17. avg 2014, 12:35

naredi en class npr. .fixed-header in mu daj position: fixed. Nato dodaj temu elementu z #header ta class in opazuj kaj se zgodi.

Naslednji korak je da ta class dodajaš/odstranjuješ z uporabo JS ob vsakem scrollanju.

Vzdevek :: 18. avg 2014, 18:24

Mogoče ti bo kaj koristilo
http://www.backslash.gr/content/blog/we...

Dr.S :: 16. okt 2015, 23:35

Sm se po dolgem času ponovno lotil tele zadeve - fiksen menu, kot je v primeru ki ga je podal Vzdevek. Pa ne gre.

Bi kdo za pivo tole zrihtal?

Netrunner :: 19. okt 2015, 08:30

Dr.S je 16. okt 2015 ob 23:35 izjavil:

Sm se po dolgem času ponovno lotil tele zadeve - fiksen menu, kot je v primeru ki ga je podal Vzdevek. Pa ne gre.

Bi kdo za pivo tole zrihtal?

Pa ni mi jasno kaj je tukaj težkega za narediti. Postaviš en div malo CSSja in en JS

<head>
<style>
.myMenu {
  display: block;
  width: 100%;
  position: fixed;
  top: 100px; /* pač nastavi si ustrezno višino */
  left: 0;
  z-index: 9999; /* zato da je vedno nad ostalimi elementi*/
}

.absTop {top: 0 !important;}
</style>

</head>
<body>

<nav class="myMenu">
  <a href="#">Povezava 1</a>
  <a href="#">Povezava 2</a>
  <a href="#">Povezava 3</a>
  <a href="#">Povezava 4</a>
</nav>

...vsa ostala koda...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(window).scroll(function(){
  var sticky = $('.myMenu');  // izbereš menu
  // daš pogoj on scroll če je le ta večji ali enak višini na kateri se nahaja meni v osnovi dodaš en css kateri spremeni pozicijo top.
  if ($(window).scrollTop() >= 100) sticky.addClass('absTop');  
  else sticky.removeClass('absTop');
});
</script>
</body>

Nisem testiral vendar sem siguren da dela :)

Meni v osnovi ne rabi biti position fixed .. lahko ga klasično narediš in mu apliciraš position fixed šele on scroll

Zgodovina sprememb…

spremenilo: Netrunner (19. okt 2015 ob 08:34)

Dr.S :: 19. okt 2015, 11:13

StarCitizen sem nekaj probaval pa mi ni čist jasno.
Nisem programer, se le ljubiteljsko igram z wp-jem.
Bi lahko prosim sporočil, kako to uredim na svoji strani.
Hvala.

Evo css header (style.css) te strani je takle:
#header{height:90px;background:url("images/header.png") repeat-x scroll 0 0 #EEEEEE;}
#header-bottom{background:url("images/header-bottom.png") no-repeat scroll center top #3c4143;height:400px;margin:-7px 0 0;}
img.site-logo{max-width:480px;max-height:80px;padding:5px 0;float:left;}
#header-content{width:930px;margin:auto;}

Header.php pa:

<head>
<link rel="shortcut icon" href="/favicon.ico?" /<?php bloginfo('http://www.mojaxis.si'); ?>>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title() ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<?php wp_enqueue_style('simplify-style', get_stylesheet_uri(), false ); ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
<meta name="google-translate-customization" content="2c35bb8a4c7b3799-528a3c9beffddf7d-g656608b32c22d1bb-a"></meta>
</head>

<body <?php body_class(); ?> >
      <div id ="header">
      <div id ="header-content">
	<!-- Site Titele and Description Goes Here -->
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img class="site-logo" src="<?php header_image(); ?>"/></a>

       <h1 class="site-title-hidden"><?php bloginfo( 'name' ); ?></h1>
		<h2 class="site-title-hidden"><?php bloginfo( 'description' ); ?></h2>

        <!-- Site Main Menu Goes Here -->
        <nav id="simplify-main-menu">
		<?php if ( has_nav_menu( 'main-menu' ) ) :  wp_nav_menu( array( 'theme_location' => 'main-menu' )); else: wp_page_menu(); endif; ?>
        </nav>

         </div><!-- header-content -->
	    </div>
	  </div><!-- header --> 

</body>

Zgodovina sprememb…

spremenilo: Dr.S (19. okt 2015 ob 11:14)

Dr.S :: 19. okt 2015, 14:22

Uspelo mi je nekaj ustvariti.
Samo sedaj mi je zamaknilo desni google blok za izbiro jezika navzdol (rad bi, da ostane na sredini)
in uvodni-slider mi sedaj ne dela?

Dr.S :: 19. okt 2015, 14:46

Čudno odstranil sem spodnjo js kodo in sedaj slider dela?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(window).scroll(function(){
  var sticky = $('.myMenu');  // izbereš menu
  // daš pogoj on scroll če je le ta večji ali enak višini na kateri se nahaja meni v osnovi dodaš en css kateri spremeni pozicijo top.
  if ($(window).scrollTop() >= 100) sticky.addClass('absTop');  
  else sticky.removeClass('absTop');
});
</script>

Netrunner :: 19. okt 2015, 19:57

Po vsej verjetnosti je prišel jquery v konflikt z tvojim jquerijem oz. karkoli drugega uporabljaš. Če imaš jquery bi morala odstranitev 1 vrstice že rešiti težavo.

Dr.S :: 19. okt 2015, 20:40

Hvala, sem rešil zadevo.
Se pa še malce igram s postavitvijo.

Netrunner :: 19. okt 2015, 21:39

Dobim pivo?

Dr.S :: 20. okt 2015, 08:10

Veš da.
Prideš danes na otvoritev obvoznice v Škofjo Loko, al ti ga pošljem po pošti?

Zgodovina sprememb…

spremenilo: Dr.S (20. okt 2015 ob 08:14)

Netrunner :: 20. okt 2015, 12:17

hm... časovno ne bo šlo in malo predaleč je :)

če kdaj zaideš v Maribor se priporočam...

LP

Dr.S :: 20. okt 2015, 15:43

MB raztura.
Hvala.

Vredno ogleda ...

	Tema	Sporočila	Ogledi	Zadnje sporočilo
	Tema	Sporočila	Ogledi	Zadnje sporočilo
!	Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 ) Tody Oddelek: Izdelava spletišč	1298	345320 (4457)	sunniegoldie 11. sep 2024 05:12:48
»	Prikaz strani na različni resoluciji-Joomla jugostyle Oddelek: Izdelava spletišč	15	1930 (1658)	kr?en 26. jun 2014 18:57:18
»	CSS Spletišče BlueBerry Oddelek: Izdelava spletišč	8	1009 (718)	lexios 9. nov 2010 22:26:38
»	CSS Lists - Seznami Sportmania Oddelek: Izdelava spletišč	21	1722 (1383)	MrBrdo 6. sep 2010 14:13:40
»	3 divi v divu in float alexa-lol Oddelek: Izdelava spletišč	10	1745 (1629)	alexa-lol 2. feb 2009 16:17:38

Več podobnih tem

Zadnje novice

Zadnji članki

Išči:

Forum » Izdelava spletišč »
Glavni menu vedno na vrhu strani (frozen)

Glavni menu vedno na vrhu strani (frozen)