Antworten auf deine Fragen:
Neues Thema erstellen

Frage bezüglich Navi /Css

M

mfwenzel

Nicht mehr ganz neu hier

AW: Frage bezüglich Navi /Css

Edit:

nächstes Problem:

Wenn ich jetzt für das menuitem1 einen unterpunkt haben will, was mach ich dann da?

Ich toggle dann quasi das menuitem1a auf, nur geht das irgendwie nicht...
 
Zuletzt bearbeitet:

D

Doitsu

Aktives Mitglied

AW: Frage bezüglich Navi /Css

Du musst doch nur wieder ein a-Tag & div-Tag dazufuegen? o.o'
Ansonsten poste mal dein ganzen code.
btw: Das ist ein Forum, da antwortet man halt nicht alle 3 Minuten, also gedult ..
 
M

mfwenzel

Nicht mehr ganz neu hier

AW: Frage bezüglich Navi /Css

schon klar, ist ja auch super nett, dass ihr so schnell helft ;)

also ich hab ein neues li element hinzugefügt, aber trotzdem geht das net...

Edit: hier der Code

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html>
<head>
<style type="text/css">
<!--
.menuCategory {
   font-weight: bold;
   background-color: #F2F3F5;
   color: #036;
   padding: 2px;
  /*/*/border-top: 1px dashed #99ADC2;/* */
  /*/*/margin-top: 1px;/* */
}
#menu_1, #menu_2 {
    display: none;
}
-->
</style>

<script language="JavaScript" type="text/javascript">
function toggle(obj) {
    with (document.getElementById(obj).style) { display = (display == 'none' || display=='') ? 'block' : 'none'; }
}
</script>

</head>

<body>

<a href="javascript:toggle('menu_1')"><div class="menuCategory">menu item 1</div></a>
<div id='menu_1'><div class='menuTopic'>content to menu item 1</div></div>

<a href="javascript:toggle('menu_2')"><div class="menuCategory">menu item 2</div></a>
<div id='menu_2'><div class='menuTopic'>content to menu item 2</div></div>

</body>
</html>
 
Zuletzt bearbeitet:
D

Doitsu

Aktives Mitglied

AW: Frage bezüglich Navi /Css

Also entweder bin ich doof, oder Blind.. ich seh da kein li element.. Du musst im Listenpunkt dann eig einfach nur '<a href="javascript:toggle('menu_X')">bla</a>' eingeben, und halt die id, die angezeigt werden soll.
 
M

mfwenzel

Nicht mehr ganz neu hier

AW: Frage bezüglich Navi /Css

ahhh so was hat mir gefehlt, ich wollte nämlich wissen, wie das überhaupt funktioniert. OK werd's mal testen.
 
L

leohh

CSS verliebt

AW: Frage bezüglich Navi /Css

Weil es so schoen ist, glatt noch ein Beispiel basierend auf der jQuery-libary und ein bisschen auf Semantik achtend:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
   <head>
      <meta http-equiv="content-type" content="text/html; UTF-8" />

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
      <script type="text/javascript" charset="utf-8">
         $(document).ready(function() {
            $('li.submenu').hide();
            
            $('ul.navigation li').click(function() {
               $(this).next('.submenu').toggle()
          
            });
             
         });
         
      </script>


   </head>

   <body id="index">

   <ul class="navigation">
      <li><a href="#">menu item 1</a></li>
      <li class="submenu">
         <ul>
            <li>first content to menu item 1</li>
            <li>seccond content to menu item 1</li>
            <li><a href="#">third content to menu item 1</a></li>
            <li class="submenu">
               <ul>
                  <li>first content to menu item 1 submenu 1</li>
                  <li>seccond content to menu item 1 submenu 1</li>
                  <li>third content to menu item 1 submenu 1</li>
               </ul>
            </li>
         </ul>
      </li>
      
      <li><a href="#">menu item 2</a></li>
      <li class="submenu">
         <ul>
            <li>first content to menu item 2</li>
            <li>seccond content to menu item 2</li>
            <li>third content to menu item 2</li>
         </ul>
      </li>
      
   </ul>

</body>
</html>

Durch "$('li.submenu').hide();" versteckt man alle Menuepunkte, die die Klasse submenu tragen.
Mithilfe von "$('ul.navigation li').click(function() { $(this).next('.submenu').toggle() });" legt man auf alle li-Elemente die ein Anchorelement tragen eine (klick)Funktion fest, die auf alle Anker mit der Klasse ".submenu" reagiert. Das toggle stellt den Effekt dar.

Viel mehr gibt es da gar nicht zu erklaeren.

Auf beliebig viele Untermenues anwendbar.
Um einen schoeneren Effekt zu erzielen verwendet man anstatt von .toggle die Klasse .slideToggle.
Will man es noch auf die Spitze treiben, setzt man in die Klammern noch einen Zahlenwert der Millisekunden entspricht .slideToggle(500)
 
Zuletzt bearbeitet:
M

mfwenzel

Nicht mehr ganz neu hier

AW: Frage bezüglich Navi /Css

hm das Beispiel find ich Klasse.

Ok, also ich jetzt unter dem Sub von Menu Item 2 einen neuen Sub Punkt machen.

D.h. ich mache da so: ?

Code: 
<li><a href="#">Punkt von mir</a></li>
<li class="submenu">
                <ul>
                    <li>von mir Punkt</li>
               </ul>
</li>
Halt einfach unter den Punkt, unter dem ich das will?
 
Zuletzt bearbeitet:
M

Maximum147

Noch nicht viel geschrieben

AW: Frage bezüglich Navi /Css

leohh schrieb:
Weil es so schoen ist, glatt noch ein Beispiel basierend auf der jQuery-libary und ein bisschen auf Semantik achtend:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
   <head>
      <meta http-equiv="content-type" content="text/html; UTF-8" />

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
      <script type="text/javascript" charset="utf-8">
         $(document).ready(function() {
            $('li.submenu').hide();
            
            $('ul.navigation li').click(function() {
               $(this).next('.submenu').toggle()
          
            });
             
         });
         
      </script>


   </head>

   <body id="index">

   <ul class="navigation">
      <li><a href="#">menu item 1</a></li>
      <li class="submenu">
         <ul>
            <li>first content to menu item 1</li>
            <li>seccond content to menu item 1</li>
            <li><a href="#">third content to menu item 1</a></li>
            <li class="submenu">
               <ul>
                  <li>first content to menu item 1 submenu 1</li>
                  <li>seccond content to menu item 1 submenu 1</li>
                  <li>third content to menu item 1 submenu 1</li>
               </ul>
            </li>
         </ul>
      </li>
      
      <li><a href="#">menu item 2</a></li>
      <li class="submenu">
         <ul>
            <li>first content to menu item 2</li>
            <li>seccond content to menu item 2</li>
            <li>third content to menu item 2</li>
         </ul>
      </li>
      
   </ul>

</body>
</html>
Durch "$('li.submenu').hide();" versteckt man alle Menuepunkte, die die Klasse submenu tragen.
Mithilfe von "$('ul.navigation li').click(function() { $(this).next('.submenu').toggle() });" legt man auf alle li-Elemente die ein Anchorelement tragen eine (klick)Funktion fest, die auf alle Anker mit der Klasse ".submenu" reagiert. Das toggle stellt den Effekt dar.

Viel mehr gibt es da gar nicht zu erklaeren.

Auf beliebig viele Untermenues anwendbar.
Um einen schoeneren Effekt zu erzielen verwendet man anstatt von .toggle die Klasse .slideToggle.
Will man es noch auf die Spitze treiben, setzt man in die Klammern noch einen Zahlenwert der Millisekunden entspricht .slideToggle(500)
Zum Vergrößern anklicken....

Sorry das ich das alte Teil nochmal hochkrame, aber ich versuch gerade auch ein submenü zu erstellen.

Die Lösung finde ich schon sehr gut, nur kann man noch einstellen, dass wenn man das 2te menu item öffnet das erste wieder zu geht?

Hab keinerlei Erfahrung mit javasricpt.


Gibt es auch eine Lösung in php? oder css?

Danke

\\edit:
So nun ist noch ein weiteres Problem aufgetreten:
Wenn ich menu item 1 verlinke, also kein "#" stehen habe, kommen die Unterpunkte beim Klick nicht zum vorschein....

Mein Ziel ist es eigentlich mit klick auf den Menü punkt einen langen Text aufzurufen, gleichzeitig die Unterpunkte sichtbar machen und mit Hilfe der Unterpunkte zu verschiedenen Textstellen springen...

\\edit2: hier gehts weiter:
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 136 (Mitglieder: 3, Gäste: 133)
Robots: 834

Statistik des Forums

Themen
118.565
Beiträge
1.538.067
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben