Ergebnis 1 bis 1 von 1

Thema: Horizontale Navigationsleiste mit JQuery

  1. #1
    Youngster
    Registriert seit
    08.07.2011
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Horizontale Navigationsleiste mit JQuery

    Hallo!

    Ich versuche gerade eine gute Navigationsleiste (Dropdown) mit JQuery zu erstellen, habe allerdings Probleme.

    Das ganze ist in HTML5 programmiert.

    HTML-Code:
        <head>
            <link rel="stylesheet" type="text/css" href="css/layout.css">
            <link rel="stylesheet" type="text/css" href="css/color.css">
            <title>JQuery</title>
            <script type="text/javascript" src="jquery/jquery.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $('header#page_header nav ul li').hover(
                        function() { $('ul',this).slidedown(100); },
                        function() { $('ul',this).slideup(100); 
                    });
                });
            </script>
        </head>
        <body>
            <header id="page_header">
                <img src="images/header.png" id="header_img">
                <nav>
                    <ul>
                        <li><a href="#">Parent 01</a></li>
                            <ul>
                                <li><a href="#">01 Item 01</a></li>
                                <li><a href="#">01 Item 02</a></li>
                                <li><a href="#">01 Item 03</a></li>
                                <li><a href="#">01 Item 04</a></li>
                            </ul> 
                        <li><a href="#">Parent 02</a></li>
                        <ul>
                                <li><a href="#">02 Item 01</a></li>
                                <li><a href="#">02 Item 02</a></li>
                            </ul> 
                        <li><a href="#">Parent 03</a></li>
                        <ul>
                                <li><a href="#">03 Item 01</a></li>
                                <li><a href="#">03 Item 02</a></li>
                                <li><a href="#">03 Item 03</a></li>
                            </ul> 
                        <li><a href="#">Parent 04</a></li>
                        <ul>
                                <li><a href="#">04 Item 01</a></li>
                            </ul> 
                    </ul>
                </nav>
            </header>
            <section id="posts">
                <article class="post">
                    <header>
                          ..... und so weiter
    Das Problem was ich habe ist...
    1. dass die Navigationsleiste nicht runterklappt und
    2. dass wenn man die Submenüs standardmäßig anzeigen lässt, sind nicht die richtigen Submenüs dargestellt.

    Code:
    body{
        width: 960px;
        margin: auto;
    }
    
    header#page_header{
        width: 100%;
        text-align: center;
        margin-top: 40px;
        margin-bottom: 30px;
    }
    
    header#page_header nav { 
        display:block;  
        position:relative;
    }
    
    header#page_header nav ul { 
        padding:0; 
        margin:0; 
    }
    
    header#page_header nav li { 
        float:left; 
        list-style-type:none; 
    }
    
    header#page_header nav ul:after { 
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden; 
    }
    
    header#page_header nav li a { 
        display:block; 
        padding:10px 20px;
    }
    
    header#page_header nav ul ul { 
        display:none; 
        position:absolute; 
        top: 39px;
        left: -1px;
    }
    
    header#page_header nav ul ul li { 
        float:none;
    }
    
    header#page_header nav ul ul a { 
        padding:10px 20px; 
        border-left:none; 
        border-right:none; 
        font-size:14px; 
        background-color: #CCCCCC;
        width: 150px;
        text-align: left;
    }
    Hat jemand eine Idee warum das Ding nicht funktioniert? Bzw. hat jemand schon eine fertige Navibar?

    mfg
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von phzu (22.09.2011 um 21:46 Uhr)

Ähnliche Themen

  1. css ie hack für horizontale navigation!
    Von elroberto1337 im Forum HTML & CSS Forum
    Antworten: 28
    Letzter Beitrag: 19.06.2009, 22:23
  2. Horizontale Navi aufklappbar!
    Von CroweHammer im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 25.06.2007, 20:59
  3. Horizontale Scrollbalken
    Von aizn im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 21.02.2006, 17:38
  4. horizontale Bildlaufleiste?!
    Von Flaah im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 28.08.2005, 13:19
  5. Horizontale Navigation -- Problem ?
    Von Captain Cupra im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 27.06.2004, 13:09

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •