• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Wort / Menü aufklappen

Status
Für weitere Antworten geschlossen.
majesticc89

majesticc89

Mitglied
Servus Leute,
angenommen ich habe eine Überschrift:
<h1> Text :2017 </h1>

Nun möchte ich, dass beim drübergehen des Cursors NUR ÜBER "2017"ein "Menü nach unten ausklappt (die Seite drunter nicht beeinflußt, also nicht nach unten verschiebt o.Ä) und man bspw. 2016 / 2015 / 2014 etc. auswählen kann. Diese würden dann zu einer anderen .html Seite verlinkungen erhalten.

Wie bekommt man sowas hin?

LG
 
majesticc89 schrieb:
Nun möchte ich, dass beim drübergehen des Cursors NUR ÜBER "2017"ein "Menü nach unten ausklappt (die Seite drunter nicht beeinflußt, also nicht nach unten verschiebt o.Ä) und man bspw. 2016 / 2015 / 2014 etc. auswählen kann. Diese würden dann zu einer anderen .html Seite verlinkungen erhalten.
Zum Vergrößern anklicken....
Die Beschreibung passt eindeutig auf das gesuchte Dropdown(Menu).

Den Begriff (in Kombination mit css oder js) gut merken für spätere ausgedehnte Googlesuche :cool:
majesticc89 schrieb:
Wie bekommt man sowas hin?
Zum Vergrößern anklicken....
Zumindest nicht mit HTML alleine (= deine Wahl des Forums), sondern zuzüglich CSS oder JavaScript.

Hier zwei entsprechende Beispiele, die nicht das Ende der Fahnenstange an technischen Möglichkeiten darstellen, und aus diesem Grund für den Ersteinstieg gerade recht sind :D
Deshalb bitte noch zusätzlich selber googlen, lesen, studieren, ... lernen :)

Profis nutzen CSS- u. JS-Frameworks, wie Bootstrap u. jQuery, die hierfür alles im Plug&Play-Feeling bereitstellen - ein gewisser Kenntnisstand in den Sprachen vorausgesetzt, sonst lässt das gute Gefühl (länger) auf sich warten :cool:

So oder so (CSS vs JS, native Code vs Framework), der HTML-Code um "2017" herum gehört um ein zusätzl. HTML-Element erweitert, um innerhalb der Überschrift (1. Ordnung) <h1></h1> diesen Ausschnitt als Auslöser der späteren CSS-/JS-Aktion selektieren zu können (zB <span>2017</span>).
 
Also! Folgendes Ergebniss bisher:

HTML:
Code: 
<nav id="nav">
            <ul id="navigation">
              <li><a href="#">2017 &raquo;</a>
               <ul>
                 <li><a href="#">2016</a></li>
                  <li><a href="#">2015</a></li>
                  <li><a href="#">2014</a></li>
                 <li><a href="#">2013</a></li>
                 <li><a href="#">2012</a></li>
                 <li><a href="#">2011</a></li>
                 <li><a href="#">2010</a></li>
                 <li><a href="#">2009</a></li>
                 <li><a href="#">2008</a></li>
                 <li><a href="#">2007</a></li>
                </ul>
             </li>  
            </ul>
          </nav>

CSS:
Code: 
#nav {
    position: absolute;
    width:820px;
    height: 200px;
    margin-left:-600px;
    margin-top: -250px;
    padding:10px
}

ul#navigation {
    /* margin:0px auto; */
    margin-left: 580px;
    margin-top: -67px;
    position:absolute;
    float:left;
    border-top:1px solid darkgrey;
    border-bottom:1px solid darkgrey;
    padding: 0px;
}

ul#navigation li {
    display:inline;
    font-size:25px;
    font-weight:bold;
    margin:0;
    padding:0;
    float:left;
    position:relative;
    border-top:1px solid darkgrey;
    border-bottom:2px solid darkgrey;
}

ul#navigation li a {
    padding:10px 30px;
    color:#616161;
    text-shadow:1px 1px 0px #fff;
    text-decoration:none;
    display:inline-block;
    border-right:1px solid #fff;
    border-left:1px solid #C2C2C2;
    border-top:1px solid #fff;
    background: #dddddd;

    -webkit-transition:color 0.2s linear, background 0.2s linear;
    -moz-transition:color 0.2s linear, background 0.2s linear;
    -o-transition:color 0.2s linear, background 0.2s linear;
    transition:color 0.2s linear, background 0.2s linear;
}

ul#navigation li a:hover {
    background:#f8f8f8;
    color:#282828;
}

ul#navigation li a.first {
    border-left: 0 none;
}

ul#navigation li a.last {
    border-right: 0 none;
}

ul#navigation li:hover > a {
    background:#fff;
}

/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
/*these 2 styles are very important,
being the ones which make the drop-down to appear on hover */
    visibility:visible;
    opacity:1;
}

ul#navigation ul, ul#navigation ul li ul {
    list-style: none;
    margin: 0;
    padding: 0;
/*the next 2 styles are very important,
being the ones which make the drop-down to stay hidden */
    visibility:hidden;
    opacity:0;
    position: absolute;
    z-index: 99999;
    width:180px;
    background:/*#f8f8f8;*/#dddddd;
    box-shadow:1px 1px 3px #ccc;
/* css3 transitions for smooth hover effect */
    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear;
    -moz-transition:opacity 0.2s linear, visibility 0.2s linear;
    -o-transition:opacity 0.2s linear, visibility 0.2s linear;
    transition:opacity 0.2s linear, visibility 0.2s linear;
}

ul#navigation ul {
    top: 43px;
    left: 1px;
}

ul#navigation ul li ul {
    top: 0;
    left: 181px; /* strong related to width:180px; from above */
}

ul#navigation ul li {
    clear:both;
    width:100%;
    border:0 none;
    border-bottom:1px solid #c9c9c9;
}

ul#navigation ul li a {
    background:none;
    padding:7px 15px;
    color:#616161;
    text-shadow:1px 1px 0px #fff;
    text-decoration:none;
    display:inline-block;
    border:0 none;
    float:left;
    clear:both;
    width:150px;
}

Ist halt nicht optimal. Wie würdet ihrs den anders machen?
 
majesticc89 schrieb:
Wie würdet ihrs den anders machen?
Zum Vergrößern anklicken....
Wenn ich die Zeit dazu hätte, könnte ich dir aus dem Stand von 7, 8, 9, ... Code-Varianten erzählen - für den User optisch am Bildschirm aber auf ein und demselben Level, technisch voneinander nicht zu unterscheiden.

Und nun?

Deshalb, wie in meiner ersten Antwort zu lesen: Bitte googeln, um sich einen Überblick der unterschiedlichen Techniken zu verschaffen.
Spicelab schrieb:
[...] das gesuchte Dropdown(Menu).

Den Begriff (in Kombination mit css oder js) gut merken für spätere ausgedehnte Googlesuche :cool:
Zum Vergrößern anklicken....
Ist alles frei zugänglich und verfügbar - man muß nur etwas Zeit investieren, sich etwas schlau zu machen.
 
Ich werde mich noch näher einlesen, ich danke dir für die Links.
Eine Frage hätte ich jetzt aber noch. Mit dem "Menü/Button" den ich habe kann man nun alles so machen , wieich es gerne hätte. Mit welcher EIgenschaft stelle ich den ein, dass oben angezeigt wird, wo ich mich momentan befinde. Also bspw. wird bei mir jetzt (siehe HTML/CSS oben) immer 2017 angezeigt. Wenn ich auf "2016" klicke, hätte ich gerne, dass 2016 dran steht. Momentan steht da immer "2017", egal was ich anklicke.
 
majesticc89 schrieb:
Mit welcher EIgenschaft stelle ich den ein, dass oben angezeigt wird, wo ich mich momentan befinde. Also bspw. wird bei mir jetzt (siehe HTML/CSS oben) immer 2017 angezeigt. Wenn ich auf "2016" klicke, hätte ich gerne, dass 2016 dran steht.
Zum Vergrößern anklicken....
Innerhalb von <h1></h1>?
majesticc89 schrieb:
Momentan steht da immer "2017", egal was ich anklicke.
Zum Vergrößern anklicken....
Woher soll der Browser das auch wissen?
Um mal ein paar denkbare Stichworte genannt zu haben.
 
Noch einmal danke für all diese nützlichen Links.
Ich finde es dennoch nicht hilfreich. Mir ist schon klar, dass die Probleme von mir z.T "Kinderprobleme" sind.
Es hilft nur nicht ständig zu sagen: "Ließ dich bitte in alles ein".
Ich könnte auch Webdesign studieren. Nur brauche ich das nicht. Ich will gar nicht zu 100% verstehen (noch nicht) wie das funktioniert. Momentan möchte ich nur mein oben genanntes Problem lösen, ohne mich wochenlang in html/php/jquery und alles einzulesen (was ich noch werde, da es mich ehrlich gesagt sogar ernsthaft interessiert).
:) also danke, aber momentan fehlt mir die Zeit dafür :)
also für alle die den HTML & CSS Code oben sehen. Wie könnte ich es lösen, dass immer die gewählte Seite angezeigt wird? Ich tippe mal evtl. irgendwie mit ....class="selected"... aber auch durch ausprobieren nicht hinbekommen.
HELP!
 
Bin davon ausgegangen, dass du dich zunächst mit der Materie vertraut machen willst, um auch von Beginn an was dabei zu lernen.

Nun gut, so kann man sich täuschen...

Fiddle-Demo: https://jsfiddle.net/SpiceLab/o50Lz6hk/

Falls du dich mit der JSFiddle-Oberfläche nicht zurechtfindest, hier der Quellcode der Demoseite:
HTML: 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>...</title>
    <style type="text/css">
      nav a {
        text-decoration:none;
        color:lightgray;
      }
      nav a.selected {
        background-color:deepskyblue;
        color:aliceblue;
      }
    </style>    
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#" class="selected target"><span>2017</span> &raquo;</a>
          <ul>
            <li><a href="#">2016</a></li>
            <li><a href="#">2015</a></li>
            <li><a href="#">2014</a></li>
          </ul>
        </li>
      </ul>
    </nav>
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
    // highlight current link
    $("nav a").click(function(){
      $("nav a").removeClass("selected");
      $(this).toggleClass("selected");
    });

    // switch htmlString of .target span
    $("nav > ul > li > a + ul li a").click(function() {
      var htmlString = $(this).html();
      $(".target span").text(htmlString);
    });
    </script>
  </body>
</html>
 
Ich will mich ja auch damit vertraut machen, nur muss ich dringend erst das machen (etwas Zeitdruck). Funktioniert das nicht auch ohne jegliche Skripte mit reinem HTML und CSS?
 
Sinn war ja nicht, jemanden zu beauftragen, für mich einen ganzen Button zu machen. Das wäre zu dreist. Ich habe gehofft, jemand überfliegt den Code und kann einige Anregungen geben.
"Spicelab" hat ja schon eine optimale Lösung vorgestellt (genau so sollte es funktionieren). Werde wohl nicht drum rumkommen. Ich Wollte es aber irgendwie ohne Java-Bibliotheken lösen...
 
Also:
Wollte nur Bescheid geben, dass ich es gelöst habe. Habe anstatt dem Buttom ein Menü erstellt.
Vielleicht hilft es ja jemandem:

HTML:
Code: 
<div class="menu">
      <ul>
        <li><a href="index.html">OBER1</a></li>
        <li><a href="#"class="active">OBER2 &#x2B9A</a>
          <ul>
            <li><a href="#">UNTER1</a></li>
            <li><a href="#">UNTER2</a></li>
            <li><a href="#"class="active">UNTER3</a></li>
            <li><a href="#">UNTER4</a></li>
            <li><a href="#">UNTER5</a></li>
            <li><a href="#">UNTER7</a></li>
         </ul>
          </li>
     <li><a href="#">OBER3</a></li>
     <li><a href="#">OBER4</a>    </li>
     <li><a href="#">OBER5</a></li>
     <li><a href="#" target="new">OBER6</a></li>
     <li><a href="#">OBER7</a></li>
   </ul>
 </div>

CSS
Code: 
 div.menu {
    position: absolute;
    height: 500px;
    width: 225px;
    margin-left: 10px;
    margin-top: 10px;
  }
  div.menu ul{
    text-align: center;
    list-style: none;
    margin-left: -28px;
    height: 500px;
    width: 200px;
  }
  div.menu ul ul{
    background-color: white;
    display: none;
    list-style: none;
    margin-left: 2px;
    margin-top: 1px;
    padding-left: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    height: 295px;
    width: 200px;
  }
  div.menu li{
   
  }
  div.menu a{
    background-color: lightgrey;
    color: black;
    display: block;
    text-decoration: none;
    padding: 15px;
    border-bottom: 1px dotted white
  }
  div.menu ul ul a{
    background-color: #eee;
  }
  div.menu a:hover {
    background-color: #d9e79b;
  }
  div.menu a.active {
    background-color: #ddc295;
    color: black;
  }
  div.menu ul li:hover ul{
    display: block;
  }
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben