12 stycznia 2013

Wysuwane menu

Hej, dzisiejsza instrukcja to jedna z najciekawszych. Tak się okazało, że Zaczarowane obchodzą ważny dzień i pomyślałam, iż należałoby opublikować coś specjalnego...
Menu wysuwane nie jest spisem rozdziałów. Wygląda jak gadżet stron, ale różni się jedną cechą. Po najechaniu na nie kursorem wysunie się dodatkowa lista, zawierająca inne linki. Zrobiłam takie coś na Zaczarowanych Szablonach, Zaczarowanych Instrukcjach oraz na blogu próbnym <tu>.
Akurat za chwilę podam kod do ostatniego menu. Nie martwcie się - wszystko możecie zmienić - obramowanie, kolory podświetlonego tekstu, podświetlonego tła... (Uznałam po prostu, że czerń i biel to takie dwa uniwersalne kolory) W najbardziej strategicznych miejscach wpisałam podpowiedzi (zamknięte pomiędzy znakami /* oraz */). Dobrze, iż bardziej wprawieni użytkownicy będą potrafili z łatwością dostosować wygląd tego dodatku. Gorzej się ma sprawa z nowicjuszami, ale sądzę, że w poprzednich notach zawarłam przydatne do edycji informacje.
Oto kod, który trzeba skopiować:


<style>
/* Some stylesheet reset */
.fin, .fin ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1;
}

/* Wygląd główny */
.fin {
    /* Marginesy i obramowanie */
    display: block;
margin-left: 290px;
    position: static; top center;
    height: 34px;     /* wysokość */
    width: 370px; /* Zmień to, jeśli chcesz, żeby menu było szersze lub usuń całkowicie, jeśli chcesz, aby długość menu przybrała wartość &quot;domyślną&quot; (żeby menu było tak długie, jak pozwala na to zawartość */
    border-radius: 0px;     /* Wpisz większą wartość, jeżeli chcesz mieć zaokrąglone rogi */
    border: 1px solid #fff;     /* kolor i grubość zwykłego obramowania */

    /* Tło oraz efekty podświetlenia linku */
    background: #000000; /* Tło odczytywane w przeglądarkach IE9 oraz starszych */
    background: -webkit-linear-gradient(bottom, #000000, #000000); /* Tło dla Chrome i Safari */
    background: -moz-linear-gradient(bottom, #000000, #000000); /* Tło dla Firefoxa */
    background: -o-linear-gradient(bottom, #000000, #000000); /* Tło dla Opery */
    background: -ms-linear-gradient(bottom, #000000, #000000); /* Tło dla IE10 */
    box-shadow: inset 0 0px 0 ;     /* Cień menu */
}

.fin&gt;li {
    display: block;
    position: relative;
    float: left;
    margin: 0;
    padding: 0 1px 0 0;
}

/* Główne linki */
.fin&gt;li&gt;a {
    /* Layout */
    display: block;
    padding: 9px 34px;

    /* Styl napisów */
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: normal;
    text-decoration: none;
    color: #fff;
    text-shadow: 0 0px 0 #fff;

    /* Efekty */
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

/* Stan linków głównych po najechaniu na nie kursorem */
.fin&gt;li&gt;a:hover, .fin&gt;li:hover&gt;a {
    background: #000;     
    background: rgba(255, 255, 255, .6);
    color: #fff;
   
}

.fin&gt;li:first-child&gt;a {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.fin&gt;.dropdown&gt;a {
    padding-right: 26px;
}



.fin ul {
    position: relative;
    position: absolute;
    left: -9999px;
    display: block;
    box-shadow: 0 0px 0px rgba(0, 0, 0, .1);
}

/* Level 1 podmenu */
.fin&gt;li&gt;ul {
    padding-top: 0px;
    z-index: 99;
    border-top: 1px solid #fff;
    top: 34px;
}

/* Sprawianie, że lvl 1 wysunie się po najechaniu na niego myszką */
.fin&gt;li:hover&gt;ul {
    left: -1px;
}

/* Level 2+ podmenu */
.fin ul ul {
    left: -9999px;
    top: 0px;
    z-index: 999;
}

/* Sprawianie, że lvl 2+ menu wysuną się po najechaniu kursorem */
.fin ul&gt;li:hover&gt;ul {
    left: 120px;
    top: -1px;
}

/* Zawartość linków z podmenu */
.fin ul li {
    position: relative;
    display: block;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;

    /* Tworzenie efektu wysunięcia. Lista elementów, która się wysunie, ma 0 wysokości. Pojawi się dopiero wtedy, kiedy najedziemy kursorem w odpowiednie miejsce */
    height: 0px;
    -webkit-transition: height .3s;     /* Szybkość wysunięcia dla poszczególnych przeglądarek */
    -moz-transition: height .3s;
    -o-transition: height .3s;
    -ms-transition: height .3s;
}

/* Wysunięta lista linków */
.fin li:hover&gt;ul&gt;li {
    height: 35px;
}

.fin ul li:hover&gt;ul&gt;li:first-child {
    height: 36px;
}

/* Linki podmenu */
.fin ul li a {
    /* Styl */
    display: block;
    width: 145px;     /* Jeśli w podmenu napiszemy zbyt długi wyraz i nam go ucina, zwiększamy wartość szerokości */
    padding: 10px;     /* Odstęp od brzegów wysuniętej listy - od wszystkich krawędzi: prawej, lewej, górnej, dolnej */
    border-bottom: 1px solid #fff;

    /* Styl napisów */
    font-size: 15px;
    color: #fff;
    font-family:  Arial, sans-serif;
    text-decoration: none;
   
    /* Efekty tła */
    background: #000;
    -webkit-transition: background .3s;
    -moz-transition: background .3s;
    -ms-transition: background .3s;
    -o-transition: background .3s;
    transition: background .3s;
}

/* Stan napisów, kiedy najedziemy kursorem na linki */
.fin ul li&gt;a:hover, .fin ul li:hover&gt;a {
    background: #e9e9e9;
    color: #000;
}

.fin ul ul&gt;li:first-child&gt;a {
    border-top: 1px solid #fff;
}

.fin ul&gt;li:last-child&gt;a {
    border-bottom: 1px solid #fff;
}



.fin ul&gt;.dropdown:hover&gt;a::after, .fin ul&gt;.dropdown&gt;a:hover::after {
    border-color: #fff;
}
</style>
<ul class='fin'>
    <li><a href='#'>Planety</a>
    <ul>
        <li><a href='http://google.pl'>Ziemia</a></li>
        <li><a href='http://google.pl'>Jowisz</a></li>
        <li><a href='http://google.pl'>Merkury</a>
   
            </li>
        </ul>
</li>

    <li><a href='http://google.pl'>Księżyc</a></li>
    <li><a href='#'>Reszta</a>
<ul>
        <li><a href='http://google.pl'>Galaktyki</a></li>
        <li><a href='http://google.pl'>Mgławice</a></li>
<li><a href='http://google.pl'>Latające koty</a>
       
   
            </li>
        </ul></li>

</ul>




Proszę zwrócić uwagę na ostatnie fragmenty kodu. Tutaj rozpisujemy nasze "drzewko". Polecam zaplanowanie wszystkich linków już na samym początku (ja często rysowałam menu na kartce), ponieważ później układanie ich idzie łatwiej.

Najgorszy sposób nauczenia się konstruowania tego czegoś, to przepisywanie wszystkiego z głupa. Ślęczałam nad tym chyba ze dwa tygodnie, ponieważ nie starałam się dowiedzieć, o co chodzi. Kiedy przysiadłam na trzy godziny i skupiłam się, wszystko stało się łatwiejsze...

W lvl 1 mamy zakładkę "Planety". Od niej wychodzą trzy linki. "Księżyc", w odróżnieniu od pierwszej i ostatniej zakładki nie ma wysuwanej listy - dałam to tak dla przykładu.

Kod można wkleić (Szablon -> Edytuj kod HTML) tuż pod znacznikiem <header> (wtedy menu będzie nad nagłówkiem) lub nad </header> (będzie pod nagłówkiem). Nie można wyśrodkować tego gadżetu (a przynajmniej mi się jeszcze nie udało, ustawiałam wszystko marginesami - jak na to wpadnę, to, oczywiście, dopiszę).

Jeśli korzystacie z menu, wrzućcie link do Waszego bloga w komentarzu. Byłoby miło. xD

(Pewnie plotę trzy po trzy, bo jestem taaka padnięta... Ale chciałam dodać tę notę, żeby później móc kombinować z szablonem - czcionka jest słabo widoczna).

Gdyby ktoś miał problemy z edytowaniem lub wstawieniem (lub dalej nie rozumiał tego mojego biadolenia), to proszę się dopytywać o szczegóły (pod tą notką, oczywiście). Chętnie pomogę.

Pozdrowienia dla Ab, chociaż i tak tego nie przeczyta. XD

83 komentarze:

  1. przeczytałam, troche zrozumiałam, a teraz będę kombinować.
    zobaczymy co z tego wyjdzie :d
    [ma-dependance]

    OdpowiedzUsuń
  2. Mam małe pytanko. Ten kod to trzeba wkleić pod tym...http://images50.fotosik.pl/1821/53002737f2137802.jpg (sory za słabą jakość zdjęcia)

    OdpowiedzUsuń
    Odpowiedzi
    1. Spoko, wszystko widzę.
      Nie, to powinno być samo lub .
      Daj "rozszerz szablony widżetów" i kliknij Ctrl + F, wpisz jedno z tych dwóch :) Powinno znaleźć.

      Usuń
    2. Jedno z dwóch czyli? Który z kodów w poście trzeba użyć. Sory ale nie ogarniam tego.

      Usuń
    3. Czwarty "akapit" pod kodem, który podałam w nocie ;d wytłumaczyłam tam, że to właśnie zależy, gdzie wstawisz.
      Jak dasz pod to będzie nad nagłówkiem bloga.
      Jak nad to pod nagłówkiem.

      Usuń
  3. Łii,
    przyznam, że tamten szablon bardziej mi się podobał.
    Tło zewnętrzne - super, jak już mówiłam,
    ale kolor postów nie przypadł mi do gustu. Chyba po prostu za dużo niebieskiego. Nie widać też nazwy tytuły "wysuwane menu" jest maciupeńkie.
    But... this only my opinion.

    Poza tym, to instrukcja bardzo przydatna, brak tylko bloga, na którym można by ją zastosować ;)

    OdpowiedzUsuń
    Odpowiedzi
    1. Tak, mi tamten szablon też się bardziej podobał ;d ale z tym się makabrycznie spieszyłam, żeby wyrobić przed sesją ;d w dodatku blogspot ześwirował i komendy nie działały xd może powinnam zrobić czarne tło pod postami?
      Tak, nazwa była duża (bo zmieniałam na czcionkę nr 30), ale znowu coś się zrąbało. Poprawię wkrótce.
      Kiedyś też tak miałam ;d Tworzyłam blogi tylko po to, żeby mieć różne badziewie na nich xd

      Usuń
  4. Kombinowałam jak tylko mogłam ale nic z tego nie rozumiem, może dałaś podpowiedzi.

    OdpowiedzUsuń
    Odpowiedzi
    1. Zrobiłam dla Ciebie zrzut ekranu. http://img132.imageshack.us/img132/463/rttt.png
      Tak jest u mnie. Zaznaczony tekst to kod, który podałam w nocie. Tuż nad nim jest .
      W tym wypadku nagłówek bloga wisi pod menu.

      Usuń
  5. A zamienić kolor czcionki z postami? To znaczy: postów będzie (jak ja to nazywam) mgiełka, czyli taka jasna biel (masło maślane), a czcionka wtedy niebieska/granatowa?

    Ja zastanawiam się nad zmianą szablonu (po raz setny), więc wtedy się zobaczy :D
    Ewentualnie powiedz, czy takie cuś można zrobić w kolumnie bocznej? Wiesz, że będzie jeden level? (Dobrze powiedziałam, dobrze? :D)

    OdpowiedzUsuń
    Odpowiedzi
    1. Tak, mgiełka XD Nie wiedziałam, że "pół-transparentne tło" może mieć taką fajną nazwę x3 A czcionka będzie ciemniejsza.

      Jak chcesz zrobić jeden level tylko, to równie dobrze możesz zrobić to w gadżecie HTML i nie trzeba się tak paprać. :) Tylko musisz mieć po dwa obrazki, np. napis "Strona główna" biały oraz taki sam, tylko, że niebieski. Da się tak poustawiać, że zwykle będzie biały, ale jak najedziesz myszką, to zmieni się na niebieski xD

      Usuń
    2. To śmieszne. Pół godziny już siedzę, poprawiłam wszystko, co kazali a teraz karzą mi dać kończący tag </head i nie mam zielonego pojęcia gdzie go mam wcisnąć T.T

      Nawet już nie chcę myśleć nad tym, co powiedziałaś mi jak mam to zrobić, bo zwariuję XD

      Usuń
    3. Hmm, na bloggerze ten kod zamyka sekcję z szablonem bloga xd
      A co Ty właściwie tam teraz robisz? Oo'

      Usuń
    4. Tyle to nawet ja wiem, że head zaczyna i kończy, no i właśnie tu pojawia się problem, że nie wiem co zepsułam. A ja chciałam sobie tylko takie fajne menu zrobić... :<

      Co gdzie robię? oO

      Usuń
    5. Lol, nie ogarnęłam, robisz menu ;d To z podanego tu kodu?
      Musiałaś gdzieś przez przypadek skasować </head
      Przywróć szablon do tego, co był i wklej kod na czysto, bo on jest okej.
      A co chciałaś zmienić w kodzie? Kolorki? Wielkość?

      Usuń
    6. No właśnie już ze dwa razy zrobiłam "wyczyść zmiany" i dodawałam raz jeszcze, a to jak uparte młode ciele - dalej swoje.
      Dam blogspotowi odpoczynek i pomęczę go później, bo zaraz trzasnę komputerem, jak tak dalej pójdzie.

      I właśnie, jak skopiuję ten kod, to on się dostosuje do tego, co mam obecnie, czy do tego próbnego bloga?
      Bo wiesz, nie znam się na tych kodach, co są wpisane w odpowiednich miejscach (kolor wysuwanego menu, zwykłego menu, czcionki etc.) czy to może jeszcze inny cyc i to taki uniwersalny kod?

      Usuń
    7. Uniwersalny. Gdziekolwiek nie wklepiesz, to on wygląda tak samo :)
      To może być błąd Blogspota. Mi ostatnio nie działał CSS, a tu jest dużo CSSa. Mam nadzieję, że wkrótce naprawią usterki :)

      Usuń
  6. To nie są kody HTML tylko CSS, nie mylcie ludzi.

    OdpowiedzUsuń
    Odpowiedzi
    1. HTML i CSS, ale nikt nie napisał żadnej informacji o tym.

      Usuń
  7. Nadal nie działa i pokazuje nie zakończony
    head, a jak biorę nad head, to pokazuje
    nie zakończony html.
    Wymiękłam.
    Ogółem, jeśli tego nie ogarnę, to będę mieć
    do Ciebie ogromną prośbę w imieniu
    Grupowa :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Dobra, zrobiłam wszystko, co trzeba było, jednak wyskakuje mi błąd, że The value of attribute "href" associated with an element type "null" must not contain the '<' character.

      I poległam, bo już nie wiem, o co chodzi.

      wcześniejszy błąd z head był taki, że wkleiłam kod nie tam, gdzie trzeba xD

      Usuń
    2. Wyślij mi cały swój szablon na maila i opisz, co ma być gdzie ;d jak znajdę czas, to Ci w tym pogrzebię ;d

      Usuń
    3. Jak "cały szablon"? Znaczy: skopiować cały kod (łącznie z tym kodem menu) czy jak?
      Czy może cały kod szablonu i kod menu osobno?

      Usuń
    4. W sensie w zakładce kontakt jest mój mail - wchodzisz w szablon > utwórz/przywróć kopię zapasową > pobierz pełny szablon. I wysyłasz mi ten plik w załączniku.
      + Wyślij mi kod do swojego menu w treści maila ;d

      Usuń
    5. Dooobra, Piękna, poszło :D

      I powiedz mi, czy to wina mojego komputera/przeglądarki, że z Chrome nie mogę dodawać komentarzy na Twoim blogu?

      Usuń
    6. Też mam problemy z dodawaniem komentarzy w Chrome -.-' niby się kliknęło w boxa, a niby nie...
      Wyślij mi jeszcze linka do nagłówka ;d

      Usuń
    7. Dobra, jednak wyczarowałam Ci ten nagłówek, masz na mejlu :D

      Usuń
    8. A, i właśnie: to menu miałoby być w miejscu aktualnego menu... Kminisz o co chodzi, nie? XD

      Usuń
    9. Ta sprawa już odbębniona ;)

      Usuń
  8. Mam pytanie, czy da sie jakoś zmiejszyć odstępy pomiędzy zakładkami? by zajmowały miej meijca?

    OdpowiedzUsuń
    Odpowiedzi
    1. Tak, spójrz na ten fragment:
      /* Główne linki */
      .fin>li>a {
      /* Layout */
      display: block;
      padding: 9px 34px;

      W ostatniej linijce zamiast 34px daj mniejszą liczbę ;)

      Usuń
  9. dzieki juz do tego doszlam:D ale dzieki!!

    OdpowiedzUsuń
  10. czescmam znó pytanko, http://paris2021.blogspot.com czasem trudno jest najechać na rozsuniete men, wesz może dlaczego? Co zmienić?

    OdpowiedzUsuń
  11. Do Melody

    Znajdź fragment:
    /* Sprawianie, że lvl 1 wysunie się po najechaniu na niego myszką */
    .fin>li:hover>ul {
    left: -1px;
    }

    i dopisz linijeczkę taką:
    top: -XXpx;

    Zamiast XX wpisz odpowiednią liczbę, np 3. Wtedy te rozwijane linki się podniosą do góry.

    Całość tego fragmentu kodu powinna wyglądać tak:
    /* Sprawianie, że lvl 1 wysunie się po najechaniu na niego myszką */
    .fin>li:hover>ul {
    left: -1px;
    top: -3px;
    }

    OdpowiedzUsuń
  12. Witam! Mam pewien problem, a mianowicie. Gdzie się zmienia kolor linku po najechaniu? Próbowałam, szukałam i dalej pozostaje ten poprzedni.
    I jeszcze jedno. Jak zmienić szerokość? Próbowałam tutaj:
    display: block;
    margin-left: 290px;
    position: static; top center;
    height: 34px; /* wysokość */
    width: 370px;

    Ale nie widziałam efektu. Chyba, że google chrom bawi się ze mną w kotka i myszkę...
    I na koniec. Czy da się zrobić, aby wszystko było w oddzielnych kartach?

    OdpowiedzUsuń
  13. Kolor napisów po najechaniu zmienimy tu:
    /* Stan linków głównych po najechaniu na nie kursorem */
    .fin>li>a:hover, .fin>li:hover>a {
    background: #000;
    background: rgba(255, 255, 255, .6);
    color: #fff; /*tutaj */
    }

    oraz tutaj:

    /* Stan napisów, kiedy najedziemy kursorem na linki */
    .fin ul li>a:hover, .fin ul li:hover>a {
    background: #e9e9e9;
    color: #000; /* tutaj */
    }

    Mi działa, kiedy zmienię wartość w kodzie na szerokość (ten, co podajesz). A jakie masz tło tego menu? Jeśli przezroczyste, to nie zauważysz róznicy. Jeśli kolorowe to zobaczysz jak pasek się wydłuża.
    Jeżeli chcesz "wyśrodkować" menu musisz pokombinować (menu nie da się wyśrodkować komendami). Wejdź w sekcję, gdzie rozpisujesz drzewko menu i jako pierwszy napis wstaw obrazek przezroczysty o odpowiedniej długości ^^
    Jeśli tło masz kolorowe, warto sprawdzić efekt w innej przeglądarce lub w Chromie wyczyścić cookies. Dobrym pomysłem jest też podanie adresu swojego bloga komukolwiek, żeby on zobaczył i zrobił screena ^^
    Oddzielnych kartach? To znaczy bez wysuwanego menu, same napisy ustawione w poziomie?

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję za odpowiedź. Jak się zmobilizuję i otworzę umysł, pokombinuję. W oddzielnych kartach, mam na myśli taki efekt (dla przykładu), że mamy wszystko rozdzielone, np tak jak mam u siebie, chociażby na blogu oddech-smierci.blogspot.com tyle, że gdybyśmy najechali na kartę, ona się wysuwa, tak jak podaje instrukcja.
      Mam nadzieję, że nie nagmatwałam ;p

      Usuń
    2. Ech, już wiem, gdzie był problem z szerokością... zabrakło jednego, małego szczególika... a dokładniej ";" ... >.> *puka się w łeb*, tak czy owak dziękuję za poradę!

      Usuń
  14. Chwała ci!
    Bardzo dziękuje za instrukcje, przydała się ^^
    Co prawda jeszcze trochę muszę nad tym popracować, ale co tam xD Mam jedno pytanie : czy da się zrobić tak, by linki otwierały się w nowych oknach?

    OdpowiedzUsuń
    Odpowiedzi
    1. Wee~! ^^
      Spróbuj za apostrofem w linku dopisać to:
      target=_blank

      Usuń
    2. To u mnie nie zadziałało, ale udało się tym: ^^

      onclick='this.target='_blank''

      Usuń
  15. hej! ja znó z pytankiem! Bo chciałbym zrobić ramkę wokół menu ale jak?

    OdpowiedzUsuń
    Odpowiedzi
    1. W tym menu za ramkę odpowiada
      border: 1px solid #fff; /* kolor i grubość zwykłego obramowania */

      Jest to w drugiej "zwrotce" kodu (hah, zaraz polecą hejty za moje nazwy xd).
      Chyba, że masz inny kod. Wtedy lecisz do drzewka z linkami. Znajdujesz coś takiego:
      ul class='fin'
      Nie będzie "fin". Tu będzie stało coś innego. Klikasz ctrl + F, wpisujesz ten wyraz, a przed niego dajesz kropkę:
      .fin
      Znajdujesz taki fragment kodu. Wystarczy, że wpiszesz pod nim:
      border: 1px solid #fff;
      Kolor można zmienić. Możesz też mieć linię w kropki, linię w paski, kropki-paski... Wiele kombinacji ;d
      Jeśli dalej nie wiesz, gdzie co wkleić - wklej ten kod w komentarzu, poszperam w nim :)

      Usuń
  16. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
    Odpowiedzi
    1. Lol, początek wypowiedzi typowo jak mój x'd Bliźniaki...
      Wtedy jest to zrobione gadżetem "Strony" (tam sobie kreujesz całą kartę z postaciami, o wiele łatwiej się to obsługuje niż menu). Po prostu przycisk, nie ma tak jak u mnie całego drzewka z menu, podmenu, podpodmenu itepe. Wtedy tych stron z bohaterami nie widać, kiedy klikniemy "starsze posty".
      A u mnie w menu to tak, daję link do posta (sama używam tego u siebie). Jednak te wszystkie podstrony są widoczne, kiedy kliknę "starsze posty".
      Ale myślę, że dla Ciebie będą akuratnym rozwiązaniem strony:
      Dodajesz ten gadżet w odpowiednim miejscu i wchodzisz w panel nawigacyjny > strony. Tam masz już zrobiony link do strony głównej, wystarczy, że pododajesz to, czego sobie życzysz.
      Pewnie napisałam wszystko nieskładnie.
      Ale zawsze na noc biorę pigułki usypiające, za co proszę wybaczyć.

      Usuń
    2. Ten komentarz został usunięty przez autora.

      Usuń
  17. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
    Odpowiedzi
    1. Spróbujemy! (Już nie jestem naćpana lekami)
      Weź drugą moją "zwrotkę" pod uwagę.
      Jest tam taki fragment:
      margin-left: 290px;

      Spróbuj wpisać margin-left: 0px;

      Wtedy menu przesunie się w lewo :D

      Usuń
  18. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
    Odpowiedzi
    1. Postaram się :) Jak znajdę jakiś ciekawy temat =o=

      Usuń
  19. A ja jestem zbyt tępa, żeby to ogarnąć ;c
    Ale kod super !

    OdpowiedzUsuń
  20. Udało mi się!
    Oto adres mojego bloga: http://my-logorrhea.blogspot.com/
    Mam tylko jeden problem - to menu nie działa na IE.

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję za adres bloga, w końcu ktoś przeczytał notę do tego punktu i zrobił to, o co prosiłam x'D
      Niestety, menu działa we wszystkich przeglądarkach, tylko nie IE :<

      Usuń
  21. dzięki za te wszystkie kody! przyznam się, że z większości skorzystałam na kilku blogach;)
    teraz próbuję z tym menu, ale to chwilę mi zajmie, zanim skończę XD a jak skończę, to się pochwalę;d

    OdpowiedzUsuń
  22. Czy gdyby chciało się zmienić tło menu na przezroczyste lub półprzezroczyste, to trzeba zmienić wartości w /* Tło oraz efekty podświetlenia linku */ czy w /*Efekty tła */? Jak wyglądałby takie kody?

    OdpowiedzUsuń
    Odpowiedzi
    1. =__= Dlaczego pominęłam ten komentarz??? Przepraszaaaam!
      Już biegnę do siebie posprawdzać =___=
      Tutaj:


      /* Tło oraz efekty podświetlenia linku */
      background: transparent; /* Tło odczytywane w przeglądarkach IE9 oraz starszych */
      box-shadow: inset 0 0px 0 ; /* Cień menu */
      }

      Zamień #000000 na transparent i usuń z tego taki fragment:
      background: -webkit-linear-gradient(bottom, #000000, #000000); /* Tło dla Chrome i Safari */
      background: -moz-linear-gradient(bottom, #000000, #000000); /* Tło dla Firefoxa */
      background: -o-linear-gradient(bottom, #000000, #000000); /* Tło dla Opery */
      background: -ms-linear-gradient(bottom, #000000, #000000); /* Tło dla IE10 */

      Usuń
    2. Dziękuję bardzo, wiesz, że jesteś nieoceniona?

      Usuń
    3. Z takimi opóźnieniami to chyba jestem nieoceniona spóźnialska :D

      Usuń
  23. Czy byłaby możliwość podania ci hasła i maila, byś mogła to zrobić na jednym z moich blogów (zielona-zwiastunownia.blogspot.com)? Z HTML jestem straszna i w ogóle go nie ogarniam X.X

    OdpowiedzUsuń
  24. Hej. Kod działa świetnie, dziękuję za wszystko. Tylko jeszcze pytanie, bo ustawiając background na jakikolwiek kolor (ale nie transparent), IE traktuje je jako przezroczyste. Wiesz może, jak to naprawić? Niby dla mnie to nie problem, bo i tak z tej przeglądarki nigdy nie korzystam, ale zawsze znajdzie się ktoś, kto jednak tego używa.

    OdpowiedzUsuń
    Odpowiedzi
    1. Niestety ten kod nie działa to pod IE, bo IE nie akceptuje części komend ;-;
      Ale znalazłam tu jedno menu, co podobno działa:
      [link]. (pobierz cały pliczek, żeby mieć pewność, że niczego nie ucięło) (nie trzeba mieć konta, żeby pobrać).
      Wklej je na roboczego bloga, bo miałam obrazek, ale mi zaginął -.-

      Usuń
  25. Pers ma problem, stosunkowo duży. Nie mogę ustawić tła w wysuwanych linkach, a raczej je ustawiłam, ale zniknęło. I chciałam zmienić mu przezroczystość, ale się nie dało x.x Poza tym: linków - głównych odnośników - nie da się wyśrodkować. Nie umiem też sobie poradzić z border-radius w wysuwanych linkach. I czcionka odmawia współpracy ;c
    Błagam, pomóż! Siedzę już nad tym kilka naprawdę ładnych godzin i jestem gotowa wyrzucić komputer za okno :D
    Z góry dziękuję za pomoc. Zostawiam swoje gg i adres bloga :)
    GG: 930335
    Blog: Persowo

    OdpowiedzUsuń
    Odpowiedzi
    1. To jedziemy z koksem.
      1. Tło wysuwanych linków + przezroczystość.
      Tak grzebię i grzebię i nagle natrafiam na coś dziwnego. Tutaj:

      background: {color: #6a9657; opacity: 0,2 };
      -webkit-transition: background .3s;
      -moz-transition: background .3s;
      -ms-transition: background .3s;
      -o-transition: background .3s;
      transition: background .3s;

      Zaraz, popatrzmy bliżej:
      background: {color: #6a9657; opacity: 0,2 };

      Tu jest coś źle wpisane. Ja bym to zrobiła tak:
      background: #6a9657;
      opacity: 0.2;

      Dałam kropeczkę w 0.2, ponieważ taki zapis obowiązuje w krajach anglojęzycznych.

      Dlaczego skasowałam nawiasy?
      Jeśli popatrzymy do góry, to całość wygląda tak:
      .fin ul li a {
      display: block;
      width: 145px;
      padding: 1px;
      border-bottom: 1px dotted black;

      font-size: 14px;
      text-align: center;
      color: #202035;
      font-family: Trebuchet;
      text-decoration: none;

      background: {color: #6a9657; opacity: 0,2 };
      -webkit-transition: background .3s;
      -moz-transition: background .3s;
      -ms-transition: background .3s;
      -o-transition: background .3s;
      transition: background .3s;
      }

      Skrócę teraz kawałek, żeby pokazać jak to się gryzie:

      .fin ul li a {
      background: {color: #6a9657; opacity: 0,2 };
      }

      Nie możemy dać nawiasu w nawiasie :)

      2. Wyśrodkowanie.
      Jeszcze nie zauważyłam, żeby ktoś miał sposób na nie. Ja mam taki "ręczny".
      Wycinam w photoshopie mały, przezroczysty prostokąt. Wstawiam go tak, jak linki do drzewka, tylko zamiast tekstu np. "Strona Główna" daję +img src="linkdoobrazka" /> (zamiast < dałam plusa, żeby Blogger mi pozwolił opublikować komentarz).
      Sposób kolejny to dodanie odpowiednich odstępów pomiędzy linkami w głównym menu.

      3. Radius.
      Nie działa border-radius: 15px; ? W tym fragmencie, co właśnie zmieniałaś tło.

      4. A jaką czcionkę chcesz dać?

      5. A, i chciałam Ci powiedzieć, że musimy zmienić odległość wysuwanych linków od głównych linków. Dlaczego? Jeśli najedziemy kursorem na główny link, a później na listę, to natrafimy na zbyt duży odstęp i lista gaśnie. W ten sposób nie mogę kliknąć żadnego linku z listy.
      O ile dobrze pamiętam, znajdziemy to w tym fragmencie:
      /* Level 1 podmenu */
      .fin>li>ul {
      padding-top: 0px;
      z-index: 99;
      border-top: 1px solid #fff;
      top: 34px;
      }
      Zmień top: 34px; na trochę mniej :)

      6. Kolejna sprawa to szerokość menu. Spisownik wypadł i stał się nieklikalny :)
      .fin {
      display: block;
      margin-left: 320px;
      margin-right: 125px;
      position: static; top center;
      height: 30px;
      width: 445px;
      border-radius: 15px;
      border: 1px dotted black;

      background: transparent;
      background: -webkit-linear-gradient(bottom, transparent, transparent);
      background: -moz-linear-gradient(bottom, transparent, transparent);
      background: -o-linear-gradient(bottom, transparent, transparent);
      background: -ms-linear-gradient(bottom, transparent, transparent);
      box-shadow: inset 0 0px 0 ;
      }

      Zmieńmy wartość w width na większą :)

      Usuń
    2. Jaj, to działa! :D Dzięki za pomoc ;] Nawiasy niepotrzebne usunęłam, odległości zmniejszyłam, wartości pozmieniałam (ciągle mam tylko wątpliwości do szerokości całego menu - mam niestandardową rozdzielczość i nigdy nie wiem, czy coś na normalnych monitorach wygląda dobrze :). Jedyny dla mnie zauważalny problem dalej stanowi czcionka, bo blogger jak nie wyświetlał na moim komputerze tej, którą wpisałam w kod, tak nie wyświetla dalej. Marzy mi się Cantarell. Nie jestem jednak w stanie jej ustawić, właśnie z powodu tej, choinka, niemożności starego peceta do ogarnięcia blogspota -,-" Zdaje się, że na chwilę obecną powinna się wyświetlać czcionka Trebuchet, a ja widzę Times New Roman. Da się to jakoś naprawić? ;]

      Usuń
    3. Hm. U mnie jest dobrze wszystko. Znaczy, teraz wysuwane linki troszkę są za wysoko :)
      Aaa ja mam taki patent: jak się boję czy na moim monitorze coś się dobrze wyświetla to 1. Pytam kogoś z innym monitorem. 2. Daję CTRL + - (klawiatura numeryczna) i jak się oddalam i blog mi się cały rozlatuje, to znaczy, że innym też będzie. Twój się cały powiększa i zmniejsza :)

      Czcionkę ogarnę, bo chyba wiem, gdzie leży błąd. Musimy nie dość, że dać Cantarell, to jeszcze określić rodzinę itp. Zaraz poeksperymentuję.

      Usuń
    4. U mnie działa jak dodam w CSS linijkę:
      font: normal normal 18px Cantarell;

      czyli dodaj to w tym fragmencie:

      .fin {

      Usuń
  26. Hejka ;) Po pierwsze: wieeelkie DZIĘKUJĘĘ! W końcu mi wyszło (no, połowicznie - zaraz przedstawię problem, tylko najpierw muszę nadać Ci tytuł Królowej Blogspotowego HTML-a i CSS-a ♥
    Po drugie. Oto mój problem: Na blogu próbnym, na którym składam szablony ( http://nocholera.blogspot.com/ ) mam dwa menu kart o.O jak usunąć stare? Udało mi się pozmieniać, co do pozmieniania miałam ale to mnie robiło i pozostawiło w kawałkach. Z pozycjonowaniem sobie poradzę, spokojnie jakoś menu przeniosę ale chcę zdecydowanie jedno :D No i jeszcze strona "It's a gift". To sprawiło, że chciałam lekko zaszkodzić laptopowi... Nie wiem, gdzie to w kodzie jest. Jeszcze chciałabym, aby ostatnia strona miała takie samo zaokrąglone tło jak pierwsza (po podświetleniu). Poomóż, Fin!

    OdpowiedzUsuń
    Odpowiedzi
    1. OMG, już usunęłam! :D Pozostają inne szczegóły :( Błagam o pomoc. O, i zapomniałam - tu du du dum: nadaję Ci tytuł Królowej Blogspotowego HTML-a i CSS-a! ;)

      Usuń
  27. Tramtamtam... Mam problem.
    Jestem TAAKAA zielona w tych hateemelach i innych pierdołach. Co nieco zrozumiem, ale jeszcze nie bardzo...
    Otóż problem polega na tym, że nie wiem, gdzie to wkleić ;=;
    Jestem tępa, miło mi.
    Ponadto u mnie nie ma takiego pieprznika jak "Rozszerz szablony widżetów". ;=; Nie wiem, czy to moja wada wrodzona, ale no masakra. :/

    OdpowiedzUsuń
    Odpowiedzi
    1. Ten kod trzeba wkleić pod lub nad (w zależności czy chcesz mieć menu pod czy nad nagłówkiem, jeżeli pod nagłówkiem, to musisz wkleić kod nad, a jeżeli nad, to musisz wkleić, to pod) , które znajdziesz, gdy wejdziesz w Szablon (drugie od dołu w menu twojego bloga), a następnie Edytuj kod HTML. Te znajdziesz mniej więcej u góry kodu.
      Mam nadzieje, że pomogłam. Też z początku nie mogłam zrozumieć tego kodu, ale jak trochę pomyślałam, to się udało i teraz pracuję nad jego wyglądem ;)

      Pozdrawiam
      Agnes Mording

      Usuń
  28. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  29. Yay, dzięki! :D Zapisałam sobie kod na dysku - będę używać :3 Dziękować, dziękować, dziękować :3

    OdpowiedzUsuń
  30. Dziękuję pięknie, ślicznie i w ogóle bardzo mocno za te rady i, co najważniejsze, za kod! Udało mi się go wkleić, pozostaje jeszcze kwestia małej optymalizacji (da się przesunąć menu odrobinę niżej od nagłówka? Tzn. na pewno się da, ale jak? XD)
    Dziękuję jeszcze raz!
    Efekty, choć na razie mało spektakularne, można zobaczyć tu:
    http://szkatulka-marzen.blogspot.com/

    OdpowiedzUsuń
  31. Czy można zrobić to na stronie??? Zmienić na HTML ??

    OdpowiedzUsuń
  32. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  33. Mam pytanko możesz podać mi kod css , żeby karty na górze wysuwały się po najechaniu na nie myszką ?

    OdpowiedzUsuń
  34. Nie dało by się zrobić tego w css? Jeśli tak, to by było świetnie, bo ja... no cóż o moich wynikach lepiej nie mówić :/

    OdpowiedzUsuń
  35. hej chciałam zapytać czy na tej samej podstawie robi się np. wysuwanie obserwatorów jak masz to ty na tej stronie ;)
    twoje instrukcje są bardzo przydatne jednak chyba dziś bloger odmawia posłuszeństwa xd.

    OdpowiedzUsuń
  36. Długo szukałam i walczyłam z menu i w końcu trafiłam dzięki google na tą stronę. Wreszcie mam menu takie jak sobie wymarzyłam, dziękuję!:)

    OdpowiedzUsuń
  37. mi caly czas wyskakuje to Błąd podczas analizowania pliku XML, wiersz 936, kolumna 7: The element type "styl" must be terminated by the matching end-tag "" jak probuje wkleic ten HTML :/

    OdpowiedzUsuń

szukaj