html - How to add submenu to zurb foundation Side Nav -

-

I'm looking for side nav with multilevel objects by default Zbust Foundation 5 The sub menu does not support due to the reason. 

  & lt; Ul class = "side-nav" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Link 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Link 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "divider" & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Link 3 & lt; / A & gt; & Lt; / Li & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Link 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Link 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Link 4 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt;

For sub-menus it can be changed to support submenus for sub-menus like a down arrow or + sign.

To do this, you have to change the side-nav markup and add some CSS and JS. 

  & lt; ul class = "side-nav"> 
  
 Lt; li & gt; Link: 1 & lt; / a & gt; & lt; ul & gt; & lt ;! - UL added inside Lee - & gt; Lt; li & gt; & lt; a href = "#" & gt; Sub Link 1  
  •  
  •  
  •  
  •  
  •  <3> 
  •  
  •  
  •  <3>  & lt; / Li> 
  •

    • js 

      $ ('.pd- nav li: is ("ul")'). Children ('ul'). Hide submenu $ ('.ide-NAV li: is ("ul")'). AddClass ('haschildren'); // add class to li ul child $ ('.seed-nav li: has ("ul")). Click (function () {$ (this) .toggleClass ("active") // Click to add active category menu items $ (this) .Kids ('ul'). Slide toggle (); // Toggle submenu });

    css 

      .hasChildren: {Before content: "+"; Swim left; } .hasChildren.active: {Before Content: "-"; }


    Comments

    Post a Comment

    Popular posts from this blog

    java - org.apache.http.ProtocolException: Target host is not specified -

    -
    I have written a simple httprequest / response code and I am getting this error below: I used to type in my classpath httpclient, httpcore, common -Codecs and general logging. I am very new to Java and I do not know what's going on here. Please help me. code: import org.apache.http.client.HttpClient; Import org.apache.http.client.methods.HttpGet; Import org.apache.http.HttpResponse; Import org.apache.http.impl.client.HttpClientBuilder; Import org.apache.http.Header; Import org.apache.http.HttpHeaders; Public class UnshorteningUrl {public static zero main (string [] args throws exception {HttpGet request = zero; HTTP Client Client = HTTP ClientBuilder.credit (). Build (); Try {Request = New HTTP Gate ("trib.me/1lBFzSi"); HttpResponse httpResponse = client.execute (request); Header [] header = httpResponse.getHeaders (HttpHeaders.LOCATION); // Preconditions.checkState (headers.length == 1); String new url = header [0] .getValue (); System.out.println ("new url...
    Read more

    c# - Chart control: Design messed Up after clearing and re-adding Y-Values -

    -
    Image
    The day was struggling with this. I have three series on a chart that looks like this. Note: I am using vanof control. They are being added on the basis of input from the calculation. I am using this code to add value to each series. this.chart1.Series ["green"]. Points. AddY (greenvalue); This.chart1.Series ["totalsaving"] Points.AddY (totalsavingvalue). This.chart1.Series ["blue"] Points.AddY (bluevalue). I have set series properties like this. Both green and totalsaving are set to StackedColumn, the blue chart is set to the column for type. I started then To do is a button that brings the user back to the input field and then I am using this code to clear the series values ​​on the start code. chart 1. Series ["totaling"]. Points. clear (); Chart1.Series ["green"] Points.Clear () .; Chart1.Series ["blue"] Points.Clear () .; The same calculation click above is being calculated for the calculation of th...
    Read more

    ruby on rails - Apipie interferes with proper error codes -

    -
    I can not find this little bit in the API's docs. Let me make this special AP ready, and I thought I would document it with APP, all fine and dandy, and the ultimate verification is good, but I feel that the response to failure in verification I can not seem to throw the right HTTP code in For example, I have this post / user method, which obviously makes the user in my database good, right? Well, this is something wrong, and it's ok, but if, say, I throw the standards that it does not pass the validity of the apipie, chops apipies and throws a good old-fashioned error, if something is wrong, 422 responds with a fixed unit failure / error: post '/users.json' ,: user = & gt; D Apipie :: ParamInvalid: Invalid parameter 'Email' value "": Regular expression / [a-zA-Z0-9 will match - -] + \ @ [a-zA-Z0-9 \ -.] + \. [Az] {2,} /. # ./spec/requests/usersapi_spec.rb:66:in `In Block (Level 3) & lt; Top (required) & gt; ' Let me assume ...
    Read more