Neugestaltung Topnavigation

Topnav und Subtopnav mit <ul>

by rob_st

HTML

<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 
    This website is powered by TYPO3 - inspiring people to share!
    TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
    TYPO3 is copyright 1998-2012 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
    Information and contribution at http://typo3.org/
-->

<base href="http://www.rauchmoebel.de/">


<meta name="generator" content="TYPO3 4.6 CMS">
<meta name="keywords" content="Schlafzimmer, Schlafraum, Kleiderschrank, Schwebetürenschrank, Schiebetürenschrank, Bett, Kommode, Kinderbett, Jugendzimmer, Jugendzimmer komplett, Jugendmöbel, moderne Möbel, Made in Germany">
<meta name="description" content="Rauch Möbelwerke produziert: Schlafzimmer, Kinderzimmer, Jugendzimmer, Kleiderschrank, Schwebetürenschrank. Unsere Möbel sind &quot;Made in Germany&quot;.">
<meta name="robots" content="INDEX,FOLLOW,ARCHIVE">

<!-- <link rel="stylesheet" type="text/css" href="http://www.rauchmoebel.de/typo3temp/stylesheet_1d666a3d27.css" media="all"> -->
<link rel="stylesheet" type="text/css" href="http://www.rauchmoebel.de/fileadmin/templates/css/styles.css?1348222322" media="all">
<!-- <link rel="stylesheet" type="text/css" href="http://www.rauchmoebel.de/fileadmin/templates/css/user.css?1348124752" media="all"> -->
<link rel="stylesheet" type="text/css" href="http://www.rauchmoebel.de/fileadmin/templates/css/fullscreen.css?1343291382" media="all">


    <!-- <script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script> <script src="http://www.rauchmoebel.de/uploads/tx_t3jquery/jquery-1.7.x-1.8.x-1.2.x.js" type="text/javascript"></script> -->
<!-- <script src="http://www.rauchmoebel.de/typo3temp/javascript_147ff7e23e.js" type="text/javascript"></script> -->


<title>Startseite Rauch Möbelwerke...

CSS

#container {
    margin-top: 7px !important;
    width: 98% !important;
    min-width: 919px;
}

button:active, .button:active {
    -moz-transition: all 0.1s linear 0s;
    box-shadow: 0 0.33em 2em rgba(0, 0, 0, 0.67) inset, 1px 1px 0 rgba(255, 255, 255, 0.25) inset, -1px -1px 0 rgba(255, 255, 255, 0.25) inset;
}

button:hover, button:focus, .button:hover, .button:focus {
    background-color: #D1D1D1;
}

#topnav {
    box-shadow: none !important;
    height: 80px !important;
    margin-left: 80px !important;
}

/* Hintergrund-Verlauf / simulierter Box-Shadow */
.box-shadow-bottom-sim-b1b2b3 {
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IxYjJiMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iI2IxYjJiMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiMWIyYjMiIHN0b3Atb3BhY2l0eT0iMC4wMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(177,178,179,0.6) 0%, rgba(177,178,179,0.6) 90%, rgba(177,178,179,0.01) 100%) !important; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(177,178,179,0.6)), color-stop(90%,rgba(177,178,179,0.6)), color-stop(100%,rgba(177,178,179,0.01))) !important; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(177,178,179,0.6) 0%,rgba(177,178,179,0.6) 90%,rgba(177,178,179,0.01) 100%) !important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, ...

JavaScript

/* Behelfsscript, entfernt/ersetzt Links aus der bestehenden Topnavi */

jQuery(document).ready(function() {
    jQuery('li.topnav-click > a').each(function() {
        jQuery(this).removeAttr('href').attr('href', '#');
    });
    jQuery('li.topnav-click').addClass('popped-in');
});

/* Der folgende Teil enthält kein JavaScript, sondern als NOTIZ die gemachten Änderungen im HTML-Template.
    
    1. div#header, a: ID "Logo" zugewiesen, alt-Text ergänzt
    2. <img>-Tag mit Logo entfernt
    3. header-image people entfernt. div mit entsprechender CSS-Klasse eingefügt. Bilder könnten somit dynamisch (jQuery, T3-Template o.ä.) eingespielt werden.
    4. Produktnavigations-UL in die topnav eingefügt.
    5. Produkt-Pop-Button eingefügt
    6. Submenüs aus "Unternehmen", "Service", "Presse", "Karriere", "B2B" in Topnav in eigenen DIV ("#second-topnav") mit ID "#sub-topnav-N" übernommen.
    7. Alle Anchor-Tags aus der "#first-topnav" entfernt, die Unterseiten haben.
>>8. setzen der Breit des "#container" auf 100% (alternativ: ohne?)
    9. Verschieben des "#topnav" in den "#header".
    10. Entfernen der Hintergrundgrafik aus dem "#header-image", Anpassung der "#topnav" und des Suchschlitzes.
    11. Behelfsmässig, zum besseren Layout-Skizzieren, den Suchschlitz eine eigene Klasse gegeben. (manuelle Positionierung wird überlaufen durch .css-Files).
    12. headersearch in die topnav verschoben
    13. html-5 tags für header etc angewendet.
    14. footer in den "#main" versetzt.

user.css rausgenommen und manuell eingebunden, um komprommitierende Styles besser ausschalten zu können.

*/

/* Script zum ein- und aus-poppen der Produktnavagation */

var poppedIn = true;

function SlideBackSubNav() {
    
    if (jQuery('.sub-topnavigation').hasClass('popped-out')) {
        /* alert(jQuery('.sub-topnavigation').css('right')); */
        var slideRight = (jQuery('.sub-topnavigation.popped-out').css('right').replace("px", "") -...