» »

Glavni menu vedno na vrhu strani (frozen)

Glavni menu vedno na vrhu strani (frozen)

Dr.S ::

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 ::

Tole uporablja: http://getbootstrap.com/

Yacked2 ::

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 ::

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 ::

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 ::

Dr.S je 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 ::

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 ::

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…

Dr.S ::

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 ::

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 ::

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

Dr.S ::

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 ::

Dr.S je 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 ()

Dr.S ::

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 ()

Dr.S ::

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 ::

Č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 ::

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 ::

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

Netrunner ::

Dobim pivo?

Dr.S ::

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

Zgodovina sprememb…

  • spremenilo: Dr.S ()

Netrunner ::

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

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

LP

Dr.S ::

MB raztura.
Hvala.


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 423 24 25 26 )

Oddelek: Izdelava spletišč
1297328616 (52765) htmltroubles
»

Prikaz strani na različni resoluciji-Joomla

Oddelek: Izdelava spletišč
151787 (1515) kr?en
»

CSS Spletišče

Oddelek: Izdelava spletišč
8939 (648) lexios
»

CSS Lists - Seznami

Oddelek: Izdelava spletišč
211602 (1263) MrBrdo
»

3 divi v divu in float

Oddelek: Izdelava spletišč
101662 (1546) alexa-lol

Več podobnih tem