Jak zrobić rozwijane menu ?

pytanie zadane 17 maja 2015 w HTML i CSS przez zyrafe Użytkownik (570 p.)

To mój kodzik. >

<li class="active"><a href="polski.php">Strona Główna</a></li>
      <li><a href="#O_Firmie">O projekcie słów kilka</a></li>
      <li><a href="#Zakupy">Kup co chcesz</a></li>
      <li><a href="#Okazje">Okazje naszej firmy</a></li>
      <li><a href="#Dojazd">Dojazd do Nas</a></li>
      <li><a href="#Kontakt">Kontakt z Nami</a></li>
      <li><a><dl id="menu0"> Wybierz Język English Polish </a></li> - tu chciałbym rozwijane menu. Pozdrawiam:)

4 odpowiedzi

odpowiedź 17 maja 2015 przez Robert Saternus Stary wyjadacz (12,180 p.)

Jako że uważam że lepiej jest dać wędkę zamiast ryby to podsyłam Ci prosty i dobrze opisany poradnik jak taki efekt osiągnąć. Przeanalizuj sobie go dokładnie i na pewno więcej się nauczysz, niż jakbym Ci przesłał gotowy kod do wklejenia (którego szczerz mówiąc nie chce mi się za bardzo pisać w niedzielny wieczór :) )

http://kodcss.pl/kurs-css/lekcje/dzial-4/rozwijane-poziome-menu-css

Jak coś będzie niejasne to pytaj śmiało.

odpowiedź 17 maja 2015 przez jaca121212 Nałogowiec (40,760 p.)

i co z tym kodem mamy zrobić a gdzie kod css bez kodu css nie da się zrobić menu

komentarz 17 maja 2015 przez zyrafe Użytkownik (570 p.)

body {
color:#777;
background: #f7f7f7;
font-size: 16px;
line-height: 1.6em;
font-weight: 300;
text-shadow: none;
}
h3{
font-size:300%;
color:#00ff00;

}
.clear {
clear: both;
}

body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Lato', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
color:#222;
}

h1,h2,h3,h4,h5,h6 {
font-style: normal;
margin: 0 0 20px 0;
}
h1 { font-size: 40px; line-height: 30px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
.txt-light { font-weight: 300; }
.txt-regular { font-weight: 400; }
.txt-bold { font-weight: 700; }
.txt-uppercase { text-transform: uppercase; }

blockquote {
font-family: Georgia, serif;
}

blockquote.bigquote {
border: none;
font-size: 48px;
font-weight: 700;
line-height: 1.1em;
}

.text-bold {
font-weight: 900;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}

small {
font-size: 70%;
font-weight: 100;
}

a:hover {
text-decoration: none;
}

:focus {
outline: none;
}

.color-white.txt-shadow {
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.t-uppercase {
text-transform: uppercase;
}

/*===========================
--- Header & menu ----
=========================== */
.navbar {
line-height: 100px;
height: 100px;
background-color: rgba(0,0,0,0.3);
display: block;
vertical-align: middle;
text-align: center;
margin-bottom: 0;
padding-bottom:0;
}

.navbar .navbar-collapse {
margin-bottom: 0;
padding-bottom:0;
}

.nav li {
height: 100%;
line-height: 100%;
margin-bottom: 0;
padding-bottom:0;
}

.nav>li>a {
display: table-cell;
height: 100%;
line-height: 100%;
vertical-align: middle;
color: #fff;
font-weight: 700;
font-size: 13px;
letter-spacing: .1em;
text-transform: uppercase;
}

.nav>li>a:hover {
color: #fff;
background: none;
}

.navbar-nav {
float: right;
margin-bottom: 0;
padding-bottom:0;
}

.navbar .navbar-nav > .active > a {
color: #fff;
}
.navbar .navbar-nav > .active > a {
padding-bottom: 22px;
}

h1 a.navbar-brand {
font-size: 24px;
color: #fff;
font-weight: 900;
text-shadow: none;
}

.navbar-brand {
padding: 0;
display: table-cell;
vertical-align: middle;
line-height: 90px;
}

.navbar-brand img {
vertical-align: middle;
}

.navbar-toggle {
padding: 0;
margin: 0;
width: 80px;
}

.navbar-collapse.in {
margin-top: -5px !important;
}

/*===========================
--- Featured section ----
=========================== */

section.featured {
padding: 200px 0 60px;
background: #70B9B0;
color: #fdfdfd;
}

section.featured h2.slogan {
color: #fff;
font-size: 48px;
font-weight: 900;
}

/* inner heading */
section.featured.inner {
background: #eee;
padding: 150px 0 50px;
}

/* --- Flexslider --- */
.flexslider {
margin: 0;
background: 0;
border: 0;
box-shadow: none;
-webkit-box-shadow: none;
}

.flex-control-paging li a {
width: 8px;
height: 8px;
}

.flex-control-paging li a.flex-active {
background: #fff;
}

.flex-control-nav {
bottom: -25px;
}

.flexslider .slides img {
width: auto;
display: inline;
}

.flex-direction-nav a {
display: block;
width: 50px;
height: 98px;
margin: -29px -20px 0;
position: absolute;
top: 30%;
z-index: 10;
overflow: hidden;
opacity: 0;
cursor: pointer;
color: rgba(0,0,0,0.8);
text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}

.flex-direction-nav .flex-next {
right: -70px;
background: url(../img/arrow_large_right.png) no-repeat top left;
}

.flex-direction-nav .flex-prev {
left: -70px;
background: url(../img/arrow_large_left.png) no-repeat top left;
}

.flex-direction-nav a.flex-next:before {
content: none !important;
}

/* removing default arrows */
.flex-direction-nav a:before {
content: none !important;
}

Czy oto chodziło?

komentarz 17 maja 2015 przez jaca121212 Nałogowiec (40,760 p.)

tak to jest kod css ale dam ci takie menu

<select>
     <option value="Wybierz język">Wybierz język</option>
  <option value="english">angielski</option>
  <option value="polish">polski</option>

</select>