Navigationsleiste

  • Grüße euch,


    (Ich hoffe ich bin im richtigen thread)


    ich bin noch ein totaler noob was html angeht dennoch hab ich schonmal ein bissl rum gebastelt für ein Browser Game was ein paar Freunde und ich aufziehen.


    Nun meine Frage ... ich hätte gerne eine Navigationsleise die nicht immer da ist, sprich die verschwindet und nur wenn man in den Bereich scrollt wo sie halt sein soll wieder auftaucht.


    könnt ihr mir da vielleicht helfen?

  • Hi ...



    Schau mal hier nach:


    <!-- m --><a class="postlink" href="http://www.javarea.de/index.php3?opencat=Javascript&subcat=Navigation&id=110">http://www.javarea.de/index.php3?openca ... ion&id=110</a><!-- m -->


    Die Menüleiste befindet sich bei dem Beispiel auf der Rechtenseite... ist kaum zu sehen.. erst wenn Du mit der Maus dorthin fähsrt... klicke die Beispiele einfach durch, sind nette Sachen bei ...


    Dein Thema lässt sich mit Java abdecken... :)

  • Kleiner Hinweis am Rand - wird die Steuerung über JavaScript oder Flash aufgebaut, darf man sich nicht wundern, das es nichts mit dem Ranking in Suchmaschinen wird (falls man überhaupt reinkommt)!


    Soll nicht demotivieren


    Gruß
    Axel

  • danke erstmal hab sogar was passendes gefunden ;)


    hm nu gehts aber nur leider weiter ... ich hab den Quelltext da übernommen doch krieg ich wenns ichs einbaue nur das Fenster ansich mitn Kreuz drin ...wie baue ich denn da jetzt mein Menü rein?

  • Hallo Lucius


    Hast du den Link von Lizzi benutzt, und dort ein Script gefunden,
    wenn ja welches Script? wie heißt das Script. Dann kann dir vielleicht
    geholfen werden.

  • also ich hätte am liebsten das hier: Grafik Static left Menue


    ich weiß nur nicht genau was und wie ich da etwas umändern soll



    <body id="bbody">
    <style>
    #spanMenu {container:positioned;position:absolute;left:-99px;top:0px;width:120px;height:366px;}
    </style>


    <script language="javascript" type="text/javascript">
    <!--
    var Netscape4 = (navigator.appName == "Netscape" && navigator.appVersion.substring(0,1) >= "4");
    var Explorer4 = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.substring(0,1) >= "4");
    // -->
    </script>
    <script language="javascript1.2" type="text/javascript">
    <!--
    var yBase = window.innerHeight/2;
    var xBase = window.innerWidth/2;
    var delay = 20;
    var yAmpl = 10;
    var yMax = 40;
    var step = .2;
    var ystep = .5;
    var currStep = 0;
    var tAmpl=1;
    var Xpos = 10;
    var Ypos = 10;
    var j = 0;
    function MoveHandler(evnt) {
    Xpos = evnt.pageX ;
    Ypos = evnt.pageY ;
    }


    function SetMenuPosition(leftPixel) {
    if (Netscape4) {
    document.layers.layerMenu.left=leftPixel;
    }
    else if (Explorer4) {
    document.all("spanMenu").style.left=leftPixel;
    }
    return true;
    }
    function PositionMenu() {
    if (Netscape4) {
    document.layers.layerMenu.top = top.pageYOffset;
    }
    else if (Explorer4) {
    document.all("spanMenu").style.top=bbody.scrollTop;
    }
    return true;
    }
    function InvokeMenu () {
    if (Netscape4) {
    document.write('<layer id="layerMenu" left="-99" width="120" top="0" height="367" clip="0,0,121,396" onMouseOver="javascript:SetMenuPosition(-2);" onMouseOut="javascript:SetMenuPosition(-99);"><img src="menu.jpg" width=120 height=367 border=0 usemap="#menu"></layer>');
    }
    else if (Explorer4) {
    document.write('<span id="spanMenu" onMouseOver="javascript:SetMenuPosition(-2);" onMouseOut="javascript:SetMenuPosition(-99);"><img src="menu.jpg" width=120 height=367 border=0 usemap="#menu" alt="Menue"></span>');
    }
    if (Netscape4 || Explorer4) {
    setInterval("PositionMenu()", 200);
    }
    return true;
    }
    // -->
    </script>
    <map name="menu">
    <area shape=rect coords="17,13,90,28" href="#" target="_self" alt="Home">
    <area shape=rect coords="17,35,90,50" href="#" target="_self" alt="Java">
    <area shape=rect coords="17,55,90,70" href="#" target="_self" alt="Scripts">
    <area shape=rect coords="17,75,90,90" href="#" target="_self" alt="Java Applets">
    <area shape=rect coords="17,98,90,113" href="#" target="_self" alt="VB-Skript">
    <area shape=rect coords="17,120,90,135" href="#" target="_self" alt="Games Tips">
    <area shape=rect coords="17,140,90,155" href="#" target="_self" alt="Free Download">


    <area shape=rect coords="14,270,110,285" href="#" target="_self" alt="Windows">
    <area shape=rect coords="17,290,90,305" href="#" target="_self" alt="Bios Diagnose">
    <area shape=rect coords="14,310,110,325" href="#" target="_self" alt="Netzwerk">
    <area shape=rect coords="13,330,108,360" href="mailto:kh@javarea.de" target="_self" alt="e-Mail">
    </map>
    <script language="javascript1.2" type="text/javascript">
    <!--
    InvokeMenu();
    // -->
    </script>

  • Hallo Lucius


    Das Kreuz was Du siehst, ist ein Bild und das ist im Script, und heißt menu.jpg das Bild mußt Du erst erstellen.
    <img src="menu.jpg" width=120 height=367 border=0 usemap="#menu" alt="Menue">


    Im Bild menu.jpg muß Du dann die Links als Grafik in einem Grafik-Programm erstellen.
    Es ist viel zu kompliziert.


    Die tatsächlichen Links muß Du dann hier eintragen: href="link.htm"
    <area shape=rect coords="17,13,90,28" href="link.htm" target="_self" alt="Link">


    area shape=rect coords="17,13,90,28" das sind die Koordinaten, also wo der Link im Bild erscheinen soll.


    Diese Art benutzt man meisten auf Landkarten, wo bestimmte Städte angeklickt werden können, sogenannte Maps.


    Ich würde dir von dem Script abraten.


    Gruß Pit

  • hmpf ...kennst du dann vielleicht noch so was ähnliches?


    also ansich bin ich nichmal wählerisch ... es muss lediglich unterkategorien aufweisen können und im besten fall halt aus dem Bild verschwinden daher ich auf der Seite nicht mehr soviel Platz hab


    schau mal hier hab ich noch eins was mir ganz gut gefallen würde ...da weiß ich auch wie und was ich um ändern muss doch hier ist das Problem das es keine Unterkategorien hat .... könnte man die irgendwie noch hinzufügen?




    <style>
    <!--
    #slidemenubar, #slidemenubar2{position:absolute;left:-155px;width:160px;top:200px;border:1.5px solid #426399;background-color:lightyellow;layer-background-color:lightyellow;font:bold 12px Arial,Helvetica,MS Sans Serif;line-height:20px;}
    -->
    </style>



    <script language="JavaScript1.2">


    if (document.all)
    document.write('<div id="slidemenubar2" align="center" style="left:-150" onMouseover="pull()" onMouseout="draw()">')
    </script>


    <font face="Arial,Helvetica,MS Sans Serif">
    <layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()">


    <script language="JavaScript1.2">


    var sitems=new Array()
    var sitemlinks=new Array()
    var sitemtarget=new Array()


    sitems[0]="Home"
    sitems[1]="Umfrage"
    sitems[2]="Gästebuch"


    sitemlinks[0]="ihr,link"
    sitemlinks[1]="ihr.link"
    sitemlinks[2]="ihr.link"


    sitemtarget[0]="target=ihr Frame"
    sitemtarget[1]="target=ihr Frame"
    sitemtarget[2]="target=ihr Frame"


    for (i=0;i<=sitems.length-1;i++)
    document.write('<a href='+sitemlinks[i]+' , '+sitemtarget[i]+'>'+sitems[i]+'</a><br>')
    </script>
    </layer>



    <script language="JavaScript1.2">


    function regenerate(){
    window.location.reload()
    }
    function regenerate2(){
    if (document.layers)
    setTimeout("window.onresize=regenerate",400)
    }
    window.onload=regenerate2
    if (document.all){
    document.write('</div>')
    themenu=document.all.slidemenubar2.style
    rightboundary=0
    leftboundary=-150
    }
    else{
    themenu=document.layers.slidemenubar
    rightboundary=150
    leftboundary=10
    }
    function pull(){
    if (window.drawit)
    clearInterval(drawit)
    pullit=setInterval("pullengine()",50)
    }
    function draw(){
    clearInterval(pullit)
    drawit=setInterval("drawengine()",50)
    }
    function pullengine(){
    if (document.all&&themenu.pixelLeft<rightboundary)
    themenu.pixelLeft+=5
    else if(document.layers&&themenu.left<rightboundary)
    themenu.left+=5
    else if (window.pullit)
    clearInterval(pullit)
    }
    function drawengine(){
    if (document.all&&themenu.pixelLeft>leftboundary)
    themenu.pixelLeft-=5
    else if(document.layers&&themenu.left>leftboundary)
    themenu.left-=5
    else if (window.drawit)
    clearInterval(drawit)
    }
    </script>

  • ... es gibt viel sliding Menus, aber mit Untermenu habe ich leider auch keines Gefunden... aber wie gesagt... google Dich durch...


    Stichworte :
    Navigation
    Menu
    Sliding Menu

  • sooo ... nach viel überlegung und rum fummelei hab ich jetzt einfach das zweite etwas verändert sodass ich ohne Probleme untermenüs schalten kann :)


    Ich danke euch rechtherzlich für eure Hilfe


    *überleg*


    bevor ich allerdings einen neuen Beitrag starte um nur mal an zu fragen .... hätte vielleicht jemand Lust mir ein kleines Intro zu basteln?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!