Neugestaltung Homepage / Navigation

Entwurf

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 GmbH</title>
<!--[if IE...

CSS

#container {
    margin-top: 7px !important;
}

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: 35px !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,1) 0%, rgba(177,178,179,1) 90%, rgba(177,178,179,0.01) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(177,178,179,1)), color-stop(90%,rgba(177,178,179,1)), color-stop(100%,rgba(177,178,179,0.01))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(177,178,179,1) 0%,rgba(177,178,179,1) 90%,rgba(177,178,179,0.01) 100%) !important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(177,178,179,1) 0%,rgba(177,178,179,1) 90%,rgba(177,178,179,0.01) 100%) ; /* Opera 11.10+ */
background:...

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.
    
*/

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

var poppedIn = true;

function SlideBackSubNav() {
    if (jQuery('#second-topnav div:nth-child(n)').hasClass('popped-out')) {
        jQuery('#second-topnav div:nth-child(n)').animate({
            'right': '-919px'
        }, 200).removeClass('popped-out').addClass('popped-in');
    }
}

function SlideUpProductNav() {
    jQuery('#produktnavigation').slideUp(200).removeClass('popped-out').addClass('popped-in');
    jQuery('#content_fullscreen, #content').animate({
        "margin-top": "-3px"
    }, 25);
    jQuery('div#topnav').removeAttr('style');
    jQuery('#product-pop button').fadeOut(5, function() {
        jQuery(this).addClass("popped-in").fadeIn(5, function() {
            jQuery(this).removeClass("popped-out");
        });
    });
}


jQuery(".topnav-click").click(function() {

    var navID = jQuery(".topnav-click").index(this);
    var selectorID = "#sub-topnav-" + (navID + 1);
    if...