• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

skalowanie menu

VPS Starter Arubacloud
0 głosów
489 wizyt
pytanie zadane 24 stycznia 2017 w HTML i CSS przez DariuszH Gaduła (3,100 p.)
http://codepen.io/anon/pen/ggxMJW  Jak zrobić by podczas zmniejszania okna zmniejszały się tematy menu a nie przeskakiwały na kolejne wiersze. I jeszcze jedno, tematy nie są na swoim miejscu. Żadne pozycjonowanie nie pomaga. Czy ktoś wytłumaczy mi to ? :D
komentarz 24 stycznia 2017 przez KamilloPL Gaduła (3,470 p.)
dla osób które chcą czytelniejszy kod - bo ja dostawałem oczokwiku

http://codepen.io/kamillopl/pen/KavgdG
komentarz 25 stycznia 2017 przez pablop76 VIP (123,060 p.)
edycja 25 stycznia 2017 przez pablop76

Witam

Jak zrobić by podczas zmniejszania okna zmniejszały się tematy menu

Pasek menu (width: 100%) należy podzielić na ilość elementów w nim zawartych i ustawić takie szerokości procentowe dla tych elementów.

Oczywiście jeżeli strona zmniejszy się tak, że nie pomieści  min. szerokości tych elementów w linii to i tak zaczną "spadać". Wtedy mediaqueries, lub jquery.

Możesz jeszcze zastanowić się nad tekstem w menu, bo to on ogranicza zmniejszanie się butonów.

tematy nie są na swoim miejscu.

Usuń wszystkie position i związane z nimi pozycjonowanie. Są nie potrzebne. Wysokość tekstu w linii można ustawić za pomocą line-height o wartości takiej samej jak element , w którym tekst się zawiera.

Wyśrodkowanie elementów śródliniowych  to chyba wiesz ? :). taka porada: daj text align: center; dla pojemnika i display: inline-block; dla elementów wewnątrz.

Kod jquery również bym poprawił. Write less, do more.

$(document).ready(function(){
    $('.qformie_napis').fadeIn(2000).fadeOut(1000);
    $('.pasek').hide().slideDown(1000);
  });

ukrycie paska można dać w css tak jak zrobiłeś to dla qformie_napis i wtedy usunąć .hide() z jquery.  Ale w tym rozwiązaniu istnieje niebezpieczeństwo, że jak użytkownik wyłączy js to nie zobaczy nic. :)

background-size dla koloru nie potrzebne. Stosuje się dla background-image.

Dwie czcionki w jednym ?

div.qformie_napis {
	font-family: 'Russo One', sans-serif;
	font-family: 'Days One', sans-serif;
	font-size:23vh;
	color:black;
	line-height:79vh;
	display:none;
}

Inna sprawa to menu zazwyczaj robi się za pomoca  list  <ul> i  <ol>

komentarz 25 stycznia 2017 przez pablop76 VIP (123,060 p.)

A co do menu fixed to zrobiłbym to w js.

Należy ustawić klasę w css

.navFixed{
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
}

i dodac trochę

do js

var nav = $('.pasek'); //zapisuje obiekt do zmiennej
	
	$(window).scroll(function () {  //sprawdza skrol okna
		if ($(this).scrollTop() > 60) {
			nav.addClass("navFixed");  //jeżeli jest większy niż 60px dodaje klasę
		} else {
			nav.removeClass("navFixed"); //jeżeli nie usuwa klasę
		}
	});

 

2 odpowiedzi

0 głosów
odpowiedź 25 stycznia 2017 przez Dzemtenjem Bywalec (2,660 p.)
nadaj klasie "p" background-color: red; (nie po to by taki został, lecz żebyś widział co się dzieje z tymi elementami faktycznie, jak już ustawisz to zlikwidujesz)

i teraz tak:

klasa "p" nie potrzebuje specjalnego pozycjonowania relative, wystarczy float:left albo display: inline-block

klasa "p" ma niepotrzebny padding-left, zamiast tego wystarczy nadać jej szerokość w procentach, np: width:10%;

a żeby tematy były na swoim miejscu to możesz albo ustawić im margin-top, albo divowi w którym się znajdują (div.pasek) nadać jakiś padding-top (zmniejszając tym samym o tę wartość jego wysokość)
–1 głos
odpowiedź 24 stycznia 2017 przez Arkadiusz Fus Obywatel (1,100 p.)
edycja 25 stycznia 2017 przez Arkadiusz Fus

Nie podam Ci tutaj kodu, ale co do responsywności to polecam Bootstrapa.

Każdy element w Twoim przypadku class="p" powinien mieć 100%/(ilość elementów) width. 

 

A tak na marginesie, straszny chaos, ciężko było tam cokolwiek zobaczyć w kodzie.(możliwe że tylko ja)

// ok nie tylko ja ^^

 

//o to mi chodziło :)

http://codepen.io/anon/pen/bgrwqj

Podobne pytania

+1 głos
3 odpowiedzi 1,192 wizyt
pytanie zadane 25 października 2015 w HTML i CSS przez DariuszH Gaduła (3,100 p.)
+1 głos
3 odpowiedzi 6,922 wizyt
pytanie zadane 21 października 2015 w HTML i CSS przez DariuszH Gaduła (3,100 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...