Anzeige

JQuery Slider Menü positionieren

JQuery Slider Menü positionieren | PSD-Tutorials.de

Erstellt von Duststorm, 30.07.2008.

  1. Duststorm

    Duststorm Webdesigner oder so...

    Dabei seit:
    08.01.2008
    Beiträge:
    585
    Geschlecht:
    männlich
    Ort:
    Nähe von Freiburg
    Kameratyp:
    Keine Kamera
    JQuery Slider Menü positionieren
    Hi,
    Ich möchte dieses Slider menü nicht am oberen Bildschirmrand haben, sondern in meinem Content-Bereich, also weiter unten.
    Hier der Slider:
    Sliding Top Menu With jQuery
    Man kann den slider auch runterladen. Über schritt 1 der erklärung ist ein downloadbutton.

    Und hier eine Demo:
    jQuery Slider Menu

    Ich habe versucht die einzelnen elemente mit css einer absoluten position zu zu ordnen, aber das zerschießt meine ganze Seite. Außerdem kann ich den knopf zum sliden nicht anklicken, der ist wie hinter einer Glasscheibe:uhm:

    Hier der Code für diejenigen die den Slider nicht extra downloaden wollen:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery Slider Menu</title>
    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>

    <style type="text/css">
    body {
    margin: 0;
    font-size:16px;
    color: #000000;
    font-family:Arial, Helvetica, sans-serif;
    }
    #sliderWrap {
    margin: 0 auto;
    width: 300px;
    }
    #slider {

    position: absolute;
    background-image:url(slider.png);
    background-repeat:no-repeat;
    background-position: bottom;
    width: 300px;
    height: 159px;
    margin-top: -141px;
    }
    #slider img {
    border: 0;
    }
    #sliderContent {
    margin: 50px 0 0 50px;
    position: absolute;
    text-align:center;
    background-color:#FFFFCC;
    color:#333333;
    font-weight:bold;
    padding: 10px;
    }
    #header {
    margin: 0 auto;
    width: 600px;
    background-color: #F0F0F0;
    height: 200px;
    padding: 10px;
    }
    #openCloseWrap {
    position:absolute;
    margin: 143px 0 0 120px;
    font-size:12px;
    font-weight:bold;
    }
    </style>

    </head>
    <body>


    <script type="text/javascript">
    $(document).ready(function() {
    $(".topMenuAction").click( function() {
    if ($("#openCloseIdentifier").is(":hidden")) {
    $("#slider").animate({
    marginTop: "-141px"
    }, 500 );
    $("#topMenuImage").html('<img src="open.png" alt="open" />');
    $("#openCloseIdentifier").show();
    } else {
    $("#slider").animate({
    marginTop: "0px"
    }, 500 );
    $("#topMenuImage").html('<img src="close.png" alt="close" />');
    $("#openCloseIdentifier").hide();
    }
    });
    });
    </script>



    <div id="sliderWrap">
    <div id="openCloseIdentifier"></div>
    <div id="slider">
    <div id="sliderContent">
    Isn't this nice?
    </div>
    <div id="openCloseWrap">
    <a href="#" class="topMenuAction" id="topMenuImage">
    <img src="open.png" alt="open" />
    </a>
    </div>
    </div>
    </div>



    <div id="header">
    <p></p>
    <a href="#" class="topMenuAction">Click me</a> or the open/close buttons. I will stay behind the slider.
    </div>


    </body>
    </html>


    Könnt ihr mir weiterhelfen? Wie kann ich den Slider positionieren?
    Außerdem: Der slider wird ja vom Bildschirmrand versteckt, bis er ausfährt. Kann ich den Bildschirmrand sozusagen durch ein bild ersetzten das über dem slider liegt? Damit man den Slider nicht schon eingeklappt sieht.

    Wäre sehr dankbar wenn ihr mir helfen könntet,
    Grüße, Duststorm
     
    #1      
  2. atbash

    atbash Mod | Web

    211
    Dabei seit:
    29.01.2007
    Beiträge:
    2.374
    Geschlecht:
    weiblich
    Ort:
    Pfalz
    Software:
    PS, ID, IL, DW, Phase5
    JQuery Slider Menü positionieren
    AW: JQuery Slider Menü positionieren

    Ich weiss nicht so recht, ob ich dein Problem richtig verstanden habe... du willst diesen Slider nicht ganz oben auf der Seite haben, sondern weiter unten im Contentbereich, richtig?

    <script type="text/javascript">
    $(document).ready(function() {
    $(".topMenuAction").click( function() {
    if ($("#openCloseIdentifier").is(":hidden")) {
    $("#slider").animate({
    marginTop: "-141px"
    }, 500 );

    Das musst du erst mal ändern. Und so wie ich das sehe, hast du gar keinen Content notiert, sondern den Slider in den head gepackt. Da kann er ja nirgendwo anders angezeigt werden. Füg im Zweifelsfall im CSS noch ein z-index: 100; für den Slider ein, damit er ganz oben liegt. Dann sollte er auch anklickbar sein.
     
    #2      
  3. Duststorm

    Duststorm Webdesigner oder so...

    Dabei seit:
    08.01.2008
    Beiträge:
    585
    Geschlecht:
    männlich
    Ort:
    Nähe von Freiburg
    Kameratyp:
    Keine Kamera
    JQuery Slider Menü positionieren
    AW: JQuery Slider Menü positionieren

    Danke erstmal für die antwort,
    bin ziemlicher anfänger.
    Das verstehe ich nicht, steht doch im <body> oder wie meinst du das?
    Ist der css befehl zb:
    #slider {

    position: absolute;
    background-image:url(slider.png);
    background-repeat:no-repeat;
    background-position: bottom;
    width: 300px;
    height: 159px;
    margin-top: -141px;
    z-index: 100;
    }

    oder wie? Sorry hab ich noch nie gehört.
    Danke im voraus,
    Duststorm
     
    #3      
  4. atbash

    atbash Mod | Web

    211
    Dabei seit:
    29.01.2007
    Beiträge:
    2.374
    Geschlecht:
    weiblich
    Ort:
    Pfalz
    Software:
    PS, ID, IL, DW, Phase5
    JQuery Slider Menü positionieren
    AW: JQuery Slider Menü positionieren

    Klassischerweise besteht ja so ne Webseite aus Header, Content und Footer. Das sind drei Bereiche die du jeweils als DIV anlegst.

    <body>
    <div id="header"></div>
    <div id="content">Hier kommt dein Slider rein</div>
    <div id="footer"></div>
    </body>

    Um zu vermeiden, dass es dir die Seite zerreisst wenn du im Content etwas änderst, etwa Text eingibst, legst du in diesen DIV nochmal einen DIV mit dem Slider. Sieht dann so aus:

    <body>
    <div id="header"></div>
    <div id="content"> <div id="slider">Hier kommt dein Slider rein</div></div>
    <div id="footer"></div>
    </body>

    Diese Angaben hast du im JavaScript, die werden vom Browser vorrangig abgearbeitet:
    <script type="text/javascript">
    $(document).ready(function() {
    $(".topMenuAction").click( function() {
    if ($("#openCloseIdentifier").is(":hidden")) {
    $("#slider").animate({
    marginTop: "-141px"
    }, 500 );

    Wenn du nun so vorgehst wie ich es dir gerade beschrieben habe und den margintop aus dem JavaScript auf Null setzt, dann sollte der Browser deine CSS-Angaben nehmen.
     
    #4      
  5. Duststorm

    Duststorm Webdesigner oder so...

    Dabei seit:
    08.01.2008
    Beiträge:
    585
    Geschlecht:
    männlich
    Ort:
    Nähe von Freiburg
    Kameratyp:
    Keine Kamera
    JQuery Slider Menü positionieren
    AW: JQuery Slider Menü positionieren

    Danke für die antwort,
    ich habe es jetzt zwar in meine seite eingebaut, positioniert und so umgeschrieben wie du es gesagt hast. Aber der slider ist immernoch nicht anklickbar. Was tun?
    danke im vorraus,
    Duststorm
     
    #5      
  6. atbash

    atbash Mod | Web

    211
    Dabei seit:
    29.01.2007
    Beiträge:
    2.374
    Geschlecht:
    weiblich
    Ort:
    Pfalz
    Software:
    PS, ID, IL, DW, Phase5
    JQuery Slider Menü positionieren
    AW: JQuery Slider Menü positionieren

    Mal einen Link zu deiner Seite posten :)
     
    #6      
x
×
×
teststefan