Przykład menu horyzontalnego


Przykład menu bocznego














Menu horyzontalne

Po najechaniu kursorem na poszczególne jego elementy w belce głównej, zauważ że rozwija się ona do dołu, ukazując dalsze jego elementy. Klikając w nie, zostaniesz odesłany do poszczególnych elementów mojej strony. Oczywiście możesz sam zrobić takie menu. A o to jak to zrobić:

  1. Z podanej strony skopiuj skopiuj cztery pliki do swojego katalogu głównego (tam gdzie trzymasz pliki tworzące Twoją stronę)

    2. Wejście na stronę ze skryptem

  2. Skopiuj ten oto skrypt pomiędzy znaczniki <head>...</head>

    3. <!DOCTYPE html>

    <link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
    <link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

    <script type="text/javascript" src="ddsmoothmenu.js">


    </script>

    <script type="text/javascript">

    ddsmoothmenu.init({
    mainmenuid: "smoothmenu1", //menu DIV id
    orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
    classname: 'ddsmoothmenu', //class added to menu's outer DIV
    //customtheme: ["#1c5a80", "#18374a"],
    contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    })

    ddsmoothmenu.init({
    mainmenuid: "smoothmenu2", //Menu DIV id
    orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
    classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
    method: 'toggle', // set to 'hover' (default) or 'toggle'
    arrowswap: true, // enable rollover effect on menu arrow images?
    //customtheme: ["#804000", "#482400"],
    contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    })

    </script>

  3. Skopiuj ten oto skrypt pomiędzy znaczniki <body></body>

    4. <div id="smoothmenu1" class="ddsmoothmenu">

    <ul>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Item 1</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Folder 0</a>
    <ul>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.1</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.2</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.3</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.4</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.2</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.3</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.4</a></li>
    </ul>
    </li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Folder 1</a>
    <ul>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.1</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.2</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.3</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.4</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.2</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.3</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.4</a></li>
    <ul>
    </li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Item 3</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Folder 2</a>
    <ul>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 2.1</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Folder 2.1</a>
    <ul>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 2.1.1</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 2.1.2</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Folder 3.1.1</a>
    <ul>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 3.1.1.1</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 3.1.1.2</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 3.1.1.3</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 3.1.1.4</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 3.1.1.5</a></li>
    </ul>
    </li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 2.1.4</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Item 4</a></li>
    </ul>
    <br style="clear: left" />
    </div>


    <h2 style="margin-top:200px">Przykład menu bocznego</h2>

    <div id="smoothmenu2" class="ddsmoothmenu-v">
    <ul>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Item 1</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Folder 0</a>
    <ul>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.1</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.2</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.3</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.4</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.2</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.3</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.4</a></li>
    </ul>
    </li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Folder 1</a>
    <ul>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.1</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.2</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.3</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.4</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.2</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.3</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 1.4</a></li>
    </ul>
    </li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Item 3</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Folder 2</a>
    <ul>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 2.1</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Folder 2.1</a>
    <ul>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 2.1.1</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 2.1.2</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Folder 3.1.1</a>
    <ul>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 3.1.1.1</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 3.1.1.2</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 3.1.1.3</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 3.1.1.4</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 3.1.1.5</a></li>
    </ul>
    </li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Sub Item 2.1.4</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Item 4</a></li>
    </ul>
    <br style="clear: left" />
    </div>

  4. Już prawie gotowe. Masz ogólny zarys swojego menu horyzontalnego. Możesz dowolnie uzupełniać poszczególne komórki menu.

Menu boczne

Po najechaniu kursorem na poszczególne jego elementy w belce głównej, zauważ że rozwijają się one do boku, ukazując dalsze jego elementy. Klikając w nie, zostaniesz odesłany do poszczególnych elementów mojej strony. Oczywiście możesz sam zrobić takie menu. A o to jak to zrobić:

  1. Z podanej strony skopiuj skopiuj cztery pliki do swojego katalogu głównego (tam gdzie trzymasz pliki tworzące Twoją stronę)

    2. Wejście na stronę ze skryptem

  2. Jeżel jeszcze nie masz tego skryptu pomiędzy znacznikami <head>...</head> to możesz go tam wkleić

    3. <!DOCTYPE html>

    <link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
    <link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

    <script type="text/javascript" src="ddsmoothmenu.js">


    </script>

    <script type="text/javascript">

    ddsmoothmenu.init({
    mainmenuid: "smoothmenu1", //menu DIV id
    orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
    classname: 'ddsmoothmenu', //class added to menu's outer DIV
    //customtheme: ["#1c5a80", "#18374a"],
    contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    })

    ddsmoothmenu.init({
    mainmenuid: "smoothmenu2", //Menu DIV id
    orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
    classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
    method: 'toggle', // set to 'hover' (default) or 'toggle'
    arrowswap: true, // enable rollover effect on menu arrow images?
    //customtheme: ["#804000", "#482400"],
    contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    })

    </script>

  3. Skopiuj ten oto skrypt pomiędzy znaczniki <body></body>

    4. <div id="smoothmenu2" class="ddsmoothmenu-v">
    <ul>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a>
    <ul>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a>
    <ul>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    </ul>
    </li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    </ul>
    </li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a>
    <ul>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    </ul>
    </li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a>
    <ul>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a>
    <ul>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a>
    <ul>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    </ul>
    </li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="Adres internetowy jakiegos odsylacza-tu możesz wpisać dowolny adres">Twoja komórka</a></li>
    </ul>
    <br style="clear: left" />
    </div>