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

Wysuwane menu - jak zrobić na daną stronę

Object Storage Arubacloud
0 głosów
831 wizyt
pytanie zadane 30 września 2016 w HTML i CSS przez Cramalar Nowicjusz (200 p.)

Potrzebuje wysuwane menu pionowe, ale z moim wyglądam buttonów. Niestety nie wiem jak to zrobić.

https://w3layouts.com/smart-refit-corporate-business-category-flat-bootstrap-responsive-web-template/

http://www120.zippyshare.com/v/A9jJAVOw/file.html

3 odpowiedzi

0 głosów
odpowiedź 30 września 2016 przez Paweł123 Nałogowiec (33,500 p.)
komentarz 30 września 2016 przez Cramalar Nowicjusz (200 p.)

Zależy mi na tym aby menu (stylistyka zostało), poza tym potrzebne mi nie menu boczne tylko wysuwane pionowo

0 głosów
odpowiedź 30 września 2016 przez Abel Mądrala (5,140 p.)
Skoro to menu które zaprezentowałeś odpowiada ci , i tylko chcesz zmienić wygląd (wnioskuje kolor ) buttonów nie widzę przeszkód

Wystarczy zmodyfikować CSS w którym jest zapisane wszystko co tyczy się wyglądu

W paczce masz folder "css" w nim masz pliki *css w których zawarte jest wszystko co dotyczy wyglądu

Jeżeli nie wiesz który plik i w której linii jest zawarte to co chcesz zmodyfikować , wystarczy skorzystać z narzędzi dla programistów (każda przeglądarka takowe ma

Sprawdzić w nich w której linii i którym pliku jest to czego szukasz zmienić i po sprawie

dodatkowo narzędzia dla programistów  pozwalają na modyfikacje w celu sprawdzenia efektu bez modyfikacji samego kodu
komentarz 30 września 2016 przez Cramalar Nowicjusz (200 p.)

Ma być tak jak jest (wygląd) TYLKO PODMENU ZROBIĆ nie wiem ja zrobić bo stosując nowe divy tracę wygląd a zostając przy divie też nie działa prawidłowo. I teraz nie wiem czy nie będzie potrzebna gruntowna przebudowa kodu.

0 głosów
odpowiedź 1 października 2016 przez Abel Mądrala (5,140 p.)

W takim razie proszę  bardzo , gotowe rozwiązanie (pewnie nie zgodnie z regulaminem sad)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      /* ------------------------CZĘŚĆ-GÓRNA-MENU------------------------ */

      /* wygląd głównego elementu - ol */
      ol {
        list-style-type:none;
        padding:0;
        margin:0;
        background-color:#FFF;
        font-size:18px;
        height:2em;
        line-height:2em;
        text-align:center;
      }

      /* wygląd wszystkich elementów - a - znajdujących się w elemencie - ol */
      ol a {
        display:block;
        text-decoration:none;
        color:#000;
        padding:0 5px;
      }

      /* wygląd elementów - li - wszystkich dzieci elementu - ol */
      ol > li {
        float:left;
        width:150px;
        margin-left:1px;
        background-color:#FDD700;
        height:2em;
      }

      /* wygląd elementu - li - pierwszego dziecka elementu - ol */
      ol > li:first-child {
        margin-left:0;
      }

      /* wygląd elementów - li - wszystkich dzieci elementu - ol - po najechaniu kursorem myszki na element - li */
      ol > li:hover {
        background-color:#EEE;
      }

      /* wygląd elementu - a - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */
      ol > li:hover > a {
        color:#09C;
      }

      /* wygląd elementu - ul - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */
      ol > li:hover > ul {
        display:block;
      }

      /* ------------------------CZĘŚĆ-ROZWIJANA-MENU------------------------ */

      /* wygląd głównych rozwijanych elementów - ul */
      ol > li > ul {
        display:none;
        list-style-type:none;
        padding:0;
        margin:0;
      }

      /* wygląd elementu - li - w części rozwijanej */
      ol > li > ul > li {
        position:relative;
        background-color:#EEE;
      }

      /* wygląd elementu - a - w części rozwijanej */
      ol > li > ul > li > a {
        border-top:1px solid #FFF;
      }

      /* wygląd elementu - li - w części rozwijanej, po najechaniu kursorem myszki na dany element - li */
      ol > li > ul > li:hover {
        background-color:#DDD;
      }

      /* wygląd elementu - a - w części rozwijanej, po najechaniu kursorem myszki na element - li */
      ol > li > ul > li:hover > a {
        color:#09C;
      }
    </style>

  </head>

<body>

  <ol>
    <li><a href="#">dział - 1</a>
      <ul>
        <li><a href="#">link - 1</a></li>
        <li><a href="#">link - 2</a></li>
        <li><a href="#">link - 3</a></li>
        <li><a href="#">link - 4</a></li>
        <li><a href="#">link - 5</a></li>
      </ul>
    </li>

    <li><a href="#">dział - 2</a>
      <ul>
        <li><a href="#">link - 1</a></li>
        <li><a href="#">link - 2</a></li>
        <li><a href="#">link - 3</a></li>
      </ul>
    </li>

    <li><a href="#">dział - 3</a></li>

    <li><a href="#">dział - 4</a>
      <ul>
        <li><a href="#">link - 1</a></li>
        <li><a href="#">link - 2</a></li>
        <li><a href="#">link - 3</a></li>
        <li><a href="#">link - 4</a></li>
      </ul>
    </li>
  </ol>

</body>
</html>

I adres skąd to pochodzi polecam zaglądnąć samemu nauczysz się tego i owego smiley

komentarz 1 października 2016 przez Cramalar Nowicjusz (200 p.)
Sedno problemu leży w oprawie graficznej czyli CSS, chciałbym aby wygląd menu był jaki jest, problem leży w próbie zdefiniowania wyglądu w CSS ;/
komentarz 1 października 2016 przez Abel Mądrala (5,140 p.)
na stronie do której podałem ci linka masz wszystko czego potrzebujesz do zdefiniowania wyglądu takiego jakiego oczekujesz

Wybacz ale nie będę odwalał całej roboty za ciebie, jeżeli po lekturze nadal nie możesz tego zrobić sam  to będziesz niestety zmuszony do szukania u wujka google gotowca bądź też zapłacisz komuś kto ci to zrobi
komentarz 1 października 2016 przez Cramalar Nowicjusz (200 p.)
Złożoność tego jest za wielka, musiałbym zostawić diva, nava i ula, żeby informacje z CSS się zgadzały ale jak dodam ol (który już jest zdefiniowany w CSS) to lipa. Jak dodam Twój kod to znowu będzie ważniejszy niż z pliku CSS. Jak dozbieram to kupie skrypt, narazie nie mam funduszy ;/

Podobne pytania

+1 głos
1 odpowiedź 394 wizyt
pytanie zadane 26 stycznia 2021 w HTML i CSS przez Samek2222 Początkujący (440 p.)
0 głosów
1 odpowiedź 570 wizyt
0 głosów
2 odpowiedzi 877 wizyt
pytanie zadane 3 października 2017 w HTML i CSS przez Ziuziek Mądrala (5,140 p.)

92,568 zapytań

141,422 odpowiedzi

319,641 komentarzy

61,957 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...