W jakim programie mogę zrobić ciekawe menu

Post21 lis 2008, 18:18

Witam

W jakim programie mogę zrobić ciekawe menu takie jak teraz znajduje się na Nasza-klasa.pl ? coś tego typu rozkładane i jakiś ciekawy efekt np: jak się najedzie myszka na np: Start to jest więcej opcji typu kontakt itp... ? i wgłębienie się zrobi i podświetlane mogą być płatne bo posiadam gdzieś na dysku wersje trial które wcześniej używałem więc się zrobi szybciutko i będzie spoko

Post21 lis 2008, 18:39

Takie menu robi się w zwykłych arkuszach stylów CSS, no i oczywiście z wykorzystaniem wykazów nieuporządkowananych
Prymitywne: Dostępne tylko dla zarejestrowanych użytkowników oraz efekt jego działania: Dostępne tylko dla zarejestrowanych użytkowników

Inne:
Dostępne tylko dla zarejestrowanych użytkowników
efekt: Dostępne tylko dla zarejestrowanych użytkowników

Ładniejsze: Dostępne tylko dla zarejestrowanych użytkowników

Ogólnie: Dostępne tylko dla zarejestrowanych użytkowników

Post21 lis 2008, 19:13

Dostępne tylko dla zarejestrowanych użytkowników

to jest całkiem całkiem czy można np: zrobić inny kolor jasny niebieski bo strone chce zrobić ciemne tło z jasnym menu

Post21 lis 2008, 19:37

Dodaj w deklaracji stylu: background: #40BFFF;

li { /* li */
list-style-type: none; /* rodzaj wykazu */
width: 150px;
background: #40BFFF;
} /* szerokość */

Jak chcesz nagłówek menu, to jeszcze tutaj:

#menu { /* div "menu" */
width: 150px; /* szerokość */
border: 1px solid #D3D3D3; /* obrazmowanie */
height: 30px; /* wysokość */
overflow: hidden;
background: #40BFFF;} /* przycinanie */

Post21 lis 2008, 21:34

sorry ale nie kumam za bardzo

wklejam tam te kody i nic nie mam takiego menu tylko napisy same z odnośnikami ;/

Post21 lis 2008, 21:39

Trzeba to rozdzielić na część strony i część arkusza CSS.

Kod: Zaznacz cały

<body>
<head>
</head>
<title>Menu rozwijane</title>
<link rel="stylesheet" href="arkusz.css" type="text/css">
<body>
<div id="menu"> <p>Menu</p>
<ul>
<li><a href="#n1">Strona Główna</a></li>
<li><a href="#n1">Download</a></li>
<li><a href="#n1">Kontakt</a></li>
<li><a href="#n1">Forum</a></li>
</ul>
</div>
</body>
</html>

wklej to do notatnika i zapisz jako strona.html

Kod: Zaznacz cały

body { /* nasza całą strona */
background-color: #FFFFFF; /* kolor strony */
font-family: Verdana, Sans-serif; /* krój czcionki */
font-size: 10px; } /* rozmiar czcionki */

#menu { /* div "menu" */
width: 150px; /* szerokość */
border: 1px solid #D3D3D3; /* obrazmowanie */
height: 30px; /* wysokość */
overflow: hidden; 
background: #40BFFF;} /* przycinanie */

#menu:hover { /* najechane menu */
width: 150px; /* szerokość */
height: 100%; } /* wysokość (wartość musi być 100% lub "auto" */

ul { /* ul */
margin: 0px; /* margines */
padding: 0px; 
} /* odstęp */

li { /* li */
list-style-type: none; /* rodzaj wykazu */
width: 150px;
background: #00BFFF;
} /* szerokość */

li a { /* linki */
text-decoration: none; /* dekoracja linka */
display: block; /* rodzaj wyświetlenia elementów */
width: 150px; /* szerokość */
padding: 5px; /* odległości */
color: #3B3B3B; } /* kolor linka */

li a:hover { /* najechany link */
text-decoration: none; /* dekoracja tekstu */
color: #3B3B3B; /* kolor linka */
width: 150px; /* szerokość */
padding: 5px; /* odległości pomiedzy linkami */
background-color: #F0F0F0 } /* tło */

p { /* paragraf <p> */
text-align: center; }/* tekst wyśrodkowany */

Wklej to do notatnika i zapisz jako arkusz.css

Post22 lis 2008, 12:32

czy jest jakaś strona która ma dane itp... na temat jak zbudować w css i html ??

Post22 lis 2008, 14:02

Takich stron jest pełno. Najlepsza pod tym względem to:
Dostępne tylko dla zarejestrowanych użytkowników

Post22 lis 2008, 14:04

nie wiem co nie tak zrobiłem ale jak najade na pewnym sposobem na menu to trzęsie się ?

a druga sprawa jak mogę dodać nastepna kolumne chce zrobić menu górne kilka opcji

Post22 lis 2008, 15:41

Tu Masz zrobione wszystko: Dostępne tylko dla zarejestrowanych użytkowników
Usuń tylko <div id="container"> oraz <div id="obj"> (oczywiście zamykające także).
W stylach zmień tylko kolorystykę.

Np
HTML:

Kod: Zaznacz cały

<body>
<head>
</head>
<link rel="stylesheet" href="arkusz.css" type="text/css">
<body>
<div id="sMenu">
<ul>
   <li>Menu
      <ul>
         <li><a href="#n1">Link</a></li>
         <li><a href="#n1">Link</a></li>
         <li><a href="#n1">Link</a></li>
         <li><a href="#n1">Link</a></li>
      </ul>
   </li>
   <li>Menu2
      <ul>
         <li><a href="#n1">Link</a></li>
         <li><a href="#n1">Link</a></li>
         <li><a href="#n1">Link</a></li>
      </ul>
   </li>
</ul>
</div>

</body>
</html>

CSS:

Kod: Zaznacz cały

/**
 * Klasa do obslugi rozwijanego menu
 *
 * By dzialalo pod IE6 wymagany jest dodatkowy skrypt JS:
 *
 * <!--[if lt IE 7]>
 *     <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
 * <![endif]-->
 */
html, body {
      background-color: #FFFFFF; /* kolor strony */
      font-family: Verdana, Sans-serif; /* krój czcionki */
      font-size: 10px; } /* rozmiar czcionki */
}

div#obj {
   background: #3d3d3d;
   width: 740px;
   margin: 0px auto;
   height: 250px;
}

div#sMenu {
   background: #40BFFF;;
   height: 20px;
   width: 150px; /* szerokość */
   border: 1px solid #D3D3D3; /* obrazmowanie */

}

div#sMenu a {
   color: #3B3B3B; ;
   text-decoration: none;
   
}

div#sMenu ul,
div#sMenu li {
   margin: 0px;
   padding: 0px;
}

div#sMenu li {
   list-style: none;
   list-style-image: none;
   position: relative;
   padding: 3px 5px;
   white-space: nowrap;
   background: #00BFFF;
}

div#sMenu ul li:hover {

   background: #F0F0F0;
}

/**
 * Poziome menu pierwszego poziomu
 * - nie mozna uzyc >, IE6
 */
div#sMenu > ul li {
   float: left;
}

div#sMenu ul ul li {
   float: none;
}

/**
 * Menu kolejnych poziomow
 */
div#sMenu ul ul {
   z-index: 50;
   display: none;
   position: absolute;
   top: 19px;
   border-left: 1px solid red;
}

div#sMenu li:hover > ul {
   display: block;
}

/**
 * Menu drugiego poziomu - pierwsze rozwiniecie
 */
div#sMenu ul ul {
   left: 0px;
}

div#sMenu ul ul ul {
   left: 100%;
   top: 0px;
   z-index: 75;
}

Post22 lis 2008, 17:41

Spoko jak narazie jest, coś tam jest.a jak tą kolumnę obniżyć ? bo trochę to menu poszerzyłem,. i druga sprawa to tło tło i jeszcze raz tło. jak dodać ? czytałem dużo poradników ale nikt tam nie podaje lub jak napisać kod na tło strony tylko napisy i napisy

No ja bym zapomniał jeszcze jak zrobić, odnośnik z tego menu na podstronę ?mam np: Świetlica szkolna i ,chce żeby się przekierowała na stronę o tematyce świetlica, szkolna

Post22 lis 2008, 18:25

Tło strony dodajesz w znaczniku BODY, np:
<body style="background-image: url(nazwa_obrazka); ">

No ja bym zapomniał jeszcze jak zrobić, odnośnik z tego menu na podstronę ?mam np: Świetlica szkolna i ,chce żeby się przekierowała na stronę o tematyce świetlica, szkolna

W linijce:

Kod: Zaznacz cały

<li><a href="#n1">Link</a></li>

podajesz adres strony, np:

Kod: Zaznacz cały

<li><a href="www.hotfix.pl">Link</a></li>

Post22 lis 2008, 20:35

Jak ustawić szerokość kolumny ? gdzieś widziałem ale zapomniałem bo mi się automatycznie dostosowuje się do długości napisu w kolumnie menu

Post22 lis 2008, 20:38

Kod: Zaznacz cały

div#sMenu {
   background: #40BFFF;;
   height: 20px;
   width: 150px; /* szerokość */
   border: 1px solid #D3D3D3; /* obrazmowanie */

}

Post22 lis 2008, 20:45

no i nie o tą kolumnę chodzi !! tylko ta co się rozwija i nawet to co podałeś nie wiem czy to można nazwać kolumna