1. #1
    Avatar von Sky.NET
    Registriert seit
    26.11.2011
    Beiträge
    2.462
    Thanked 2.717 Times in 1.286 Posts
    Blog Entries
    7

    Standard [HTML5+CSS3+JQuery]Vertical Floating Navigation Menu

    Moin,

    hab grad bisschen mit HTML5, CSS3.0 und JQuery rumgespielt und mir ne nette Navigation zusammengebastelt, hab zwar danach gegooled, aber in der Form gibts das anscheinend nicht, hab jedenfalls nix gefunden, also kurz selbst gecoded.

    Source:

    Spoiler:
    [highlight=javascript]<!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
    var offset = $("#navBar").offset();
    var topPadding = 15;
    $(window).scroll(function() {
    if ($(window).scrollTop() > offset.top) {
    $("#navBar").stop().animate({
    marginTop: $(window).scrollTop() - offset.top + topPadding
    });
    } else {
    $("#navBar").stop().animate({
    marginTop: 0
    });
    };
    });
    });

    $(function() {
    $('#navBar').hide();
    $("a#toggler").click().toggle(function() {
    $('#navBar').animate({
    width: 'show',
    opacity: 'show'
    }, 'fast');
    }, function() {
    $('#navBar').animate({
    width: 'hide',
    opacity: 'hide'
    }, 'fast');
    });
    });
    </script>
    <style type="text/css">
    body{
    margin:0px;
    padding:0px;
    }

    #toggler {
    //IE Fix
    writing-mode:tb-rl;
    filter: flipv fliph;
    //Alle anderen Browser
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -o-transform: rotate(270deg);
    white-space:nowrap;
    position:fixed;
    border:1px solid;
    border-radius: 0px 0px 15px 15px;
    background-color:#FFF;
    font-weight:bold;
    margin-left:-27px;
    padding:5px;
    margin-top:40px;
    }

    #navBar{
    right:0px;
    width:150px;
    position: absolute;
    border:1px solid blue;
    border-right:0px;
    border-radius: 15px 0px 0px 15px;
    background-color:#CCC;
    }

    #content{
    font-size:10em;
    margin-left:12.5%;
    margin-right:12.5%;
    border:1px solid;
    }

    a{
    text-decoration:none;
    color:red;
    }
    </style>
    </head>
    <body>
    <a href="#" id="toggler" title="Menü ein-/ausblenden">Navigation</a>
    <nav id="navBar">
    <ul>
    <li>Nice</li>
    <li>Navbar</li>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
    <li>Punkt 4</li>
    <li>Punkt 5</li>
    <li>Punkt 6</li>
    <li>Punkt 7</li>
    </ul>
    </nav>
    <section id="content">Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br /></section>
    </body>
    </html>[/highlight]


    Den Code einfach in 'Test.html' kopieren und im Browser aufrufen, und bei Gefallen einfach abändern wie mans braucht.
    (Muss ja auch nicht als Menü genutzt werden =D)

    Wollte die Drehung des Textes erst rauslassen, aber eventuell kanns ja jemand gebrauchen .

    Habe die Kommentare mal rausgelasseen, wer das nicht anhand des Codes versteht wird eh nichts damit anfangen können.

    Viel Spass damit.
    Java:
    Spoiler:

    Lustige Quotes:
    Spoiler:
    Zitat Zitat von Hydra Beitrag anzeigen
    Hier (in Deutschland) kann man keine andere tolle Aktivitäten machen, als zu chillen, shoppen, saufen und Partys feiern xD Ich habe nichts gegen ab und zu mal saufen und Partys feiern, aber das ist doch nicht wirklich das wahre Leben o_o
    Wieso das Internet für die meisten Leute gefährlich ist:
    Zitat Zitat von Silent Beitrag anzeigen
    Ich weiß ja nicht was der Sinn dahinter steckt es heißt immer "security reasons".

  2. #2
    Avatar von exception
    Registriert seit
    27.03.2012
    Beiträge
    198
    Thanked 57 Times in 36 Posts

    Standard [HTML5+CSS3+JQuery]Vertical Floating Navigation Menu

    Hallo,
    sieht im Firefox sehr nett aus aber im IE funktioniert üerhaupt nichts(nicht mal Dartstellung).
    Ein kleiner Verbesserungsvorschlag: Beim ein- und ausklappen vegrößert sich die Box noch
    während dem 'reinfahren'. Das könnte man schönheitshalber verbessern

    MfG

  3. #3

    Registriert seit
    05.12.2011
    Beiträge
    66
    Thanked 12 Times in 11 Posts

    Standard [HTML5+CSS3+JQuery]Vertical Floating Navigation Menu

    @exception

    Kommt davon das Internet Explorer scheiße ist. Firefox ist das beste jaha!

    Eine kleine Vorschau:

    Bild nicht mehr verfügbar

    http://pastehtml.com/view/bef4v1j2v.html

    Das sieht schon gut aus, bsw. das Script von sich aus. Ein bisschen aufpeppen und das wird geil - versprech ich euch
    Angehängte Grafiken Angehängte Grafiken  
    Geändert von Darkfield (28.02.2014 um 10:06 Uhr)

  4. #4
    Avatar von Gangstersheep
    Registriert seit
    18.11.2011
    Beiträge
    368
    Thanked 243 Times in 168 Posts

    Standard [HTML5+CSS3+JQuery]Vertical Floating Navigation Menu

    In Google Chrome failed es.

    Da ist das Navigation gerade (Man liest nur vigation) und nicht so vertikal.
    Schade, ansonsten sehr nice. ^^

  5. #5

    Registriert seit
    03.12.2011
    Beiträge
    38
    Thanked 3 Times in 3 Posts

    Standard [HTML5+CSS3+JQuery]Vertical Floating Navigation Menu

    Ja Google Chrome macht Probleme, FireFox hingegen sieht alles super aus!
    Kann man richtig was drauß machen. Nice

    Gruß

  6. #6
    Avatar von Sky.NET
    Registriert seit
    26.11.2011
    Beiträge
    2.462
    Thanked 2.717 Times in 1.286 Posts
    Blog Entries
    7

    Standard [HTML5+CSS3+JQuery]Vertical Floating Navigation Menu

    Im IE sollte es eig. funktionieren.
    Und wenn ihr das Fähnchen nicht lesen könnt, nehmt mal die Rotation raus und macht left:0; top:0;, margin auf 0, dann sollte es eig. normal dargestellt werden.
    Java:
    Spoiler:

    Lustige Quotes:
    Spoiler:
    Zitat Zitat von Hydra Beitrag anzeigen
    Hier (in Deutschland) kann man keine andere tolle Aktivitäten machen, als zu chillen, shoppen, saufen und Partys feiern xD Ich habe nichts gegen ab und zu mal saufen und Partys feiern, aber das ist doch nicht wirklich das wahre Leben o_o
    Wieso das Internet für die meisten Leute gefährlich ist:
    Zitat Zitat von Silent Beitrag anzeigen
    Ich weiß ja nicht was der Sinn dahinter steckt es heißt immer "security reasons".

  7. #7

    Registriert seit
    29.02.2012
    Beiträge
    1
    Thanked 0 Times in 0 Posts

    Standard [HTML5+CSS3+JQuery]Vertical Floating Navigation Menu

    sieht gut aus, aber wie kann ich die Positionen definiern? ich möchte den toggler nur als kleinen Button und die navBar auf der linken Seite

  8. #8
    Avatar von Sky.NET
    Registriert seit
    26.11.2011
    Beiträge
    2.462
    Thanked 2.717 Times in 1.286 Posts
    Blog Entries
    7

    Standard [HTML5+CSS3+JQuery]Vertical Floating Navigation Menu

    @Patrik Neunteufel

    Wie? Was das für ne Frage?
    Mit CSS natürlich...
    Geändert von Darkfield (28.02.2014 um 10:06 Uhr)
    Java:
    Spoiler:

    Lustige Quotes:
    Spoiler:
    Zitat Zitat von Hydra Beitrag anzeigen
    Hier (in Deutschland) kann man keine andere tolle Aktivitäten machen, als zu chillen, shoppen, saufen und Partys feiern xD Ich habe nichts gegen ab und zu mal saufen und Partys feiern, aber das ist doch nicht wirklich das wahre Leben o_o
    Wieso das Internet für die meisten Leute gefährlich ist:
    Zitat Zitat von Silent Beitrag anzeigen
    Ich weiß ja nicht was der Sinn dahinter steckt es heißt immer "security reasons".

Ähnliche Themen

  1. [S] Umfangreiches eBook,Video ueber CSS3&HTML5
    Von derk1ng im Forum Webentwicklung
    Antworten: 0
    Letzter Beitrag: 02.09.2013, 00:46
  2. Macro Magic Invalid floating point operation
    Von ThunderStorm im Forum Software
    Antworten: 0
    Letzter Beitrag: 15.08.2013, 19:12
  3. [HTML5/CSS3] UHacks Elements
    Von patlux im Forum Showroom
    Antworten: 12
    Letzter Beitrag: 07.06.2013, 08:05
  4. Darstellungsfehler - Navigation
    Von Devon im Forum Support
    Antworten: 1
    Letzter Beitrag: 08.11.2012, 08:57
  5. HTML5 + CSS3 - Blog Layout
    Von Snees im Forum HTML
    Antworten: 0
    Letzter Beitrag: 17.08.2012, 12:35
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.