I have developed a webpage using the BootStrap framework and have a question about list items in my header.
How can I add a list to a list item?
Here is a link to my website: http://www.canninginc.co.nz/
As part of the header, I have a Products drop down list with an item 'CanLucidDream'. I am wanting to add a list (with list items) to this 'CanLucidDream' item. E.g. Galley, about etc
How can I do this?
EDIT
I did not explain what I am after very well. Basically, I want to have a list of items for the product CanLucidDream to the side of the CanLucidDream item. Like a menu item in a GUI forms application with a little arrow to the right of the menu item that then shows the list.
Is this possible in HTML/CSS?
You can, but a list within a list within a list starts looking really cluttered. If that's what you want, though, than just start a new list after the "CanLucidDream" anchor:
This is what you have:
<ul class="dropdown-menu">
<li>
CanLucidDream
</li>
</ul>
This is what it turns into:
<ul class="dropdown-menu">
<li>
CanLucidDream
<ul>
<li><a>This is the first thing.</a></li>
<li><a>This is the second thing.</a></li>
</ul>
</li>
</ul>
You'll need to style that, of course. Bootstrap might already have some sort of styling built in for drop-downs within drop-downs.
Related
I am trying to optimize my code.
I have a menu that navigates me between multiple pages. I want to keep the same menu on each page, but I want the name of the page I am currently on to show up in a menu in a different color.
Here is the code I put in each page:
<nav class="stroke" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
<ul>
<li>Home</li>
<li>Data Upload</li>
<li>Data Transformation</li>
<li>Database View</li>
<li>Maintenance</li>
<li>Log</li>
</ul>
</nav>
As you can see, I am currently on Database View page, so "Database View" menu item is highlighted in orange. If Log page document, I have "Log" menu item highlighted in Orange.
This solution is simple and it works, but I was wondering if it's possible to do this in a more efficient manner. Something CSS related. I would like to avoid making it it too convoluted, like putting a bunch of if/else statements and echoing lines from PHP, or doing innerHTML from Javascript.
Thanks,
Jake
How to customize sidebar in WordPress in a way so all the Catagory and its chiled will be available.
As For Example: In https://www.w3schools.com
if we click on top header category lets say HTML, all the html related links will available in left side bar .
I am new to HTML and Css. Could you please give some more information where exactly i can find the html and css file in my wordpress??
Where i can make changes in the WordPress?
Thanks in advance!!
Nested Lists
The Classic and Default WordPress Themes use nested lists to present their sidebar information. Nested lists are a series of unordered lists of information, set inside of each other. Here's a simple example:
<ul><!-- open whole list -->
<li>Title of Section One
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>
</li><!-- closing list under section one -->
<li>Title of Section Two
<ul>
<li>Beef</li>
<li>Chicken</li>
<li>Fish</li>
</ul>
</li><!-- closing list under section two -->
<li>Title of Section Three
<ul>
<li>Carrot</li>
<li>Celery</li>
</ul>
</li><!-- closing list under section three -->
</ul><!-- closing whole list -->
Each of these nested list "sections" can feature a CSS ID or class to make each one look different or all the same, depending upon how they are styled within the style sheet.
You don't have to use nested lists for your sidebar. That is up to you. If you do use the nested lists as set by example in the WordPress core Themes, you need to know how they work. To learn more about how to style your WordPress nested lists, check out the article on Styling Lists with CSS.
Please you may follow this https://codex.wordpress.org/Customizing_Your_Sidebar
So here is the html code for the contents of my first drop down menu:
<nav id="side-nav" style="display:none;">
<ul id="side-nav-content">
<li>
Information for Current Students
</li>
<li>
Timetables & Programme Structures
</li>
<li>
Support Services
</li>
</ul>
</nav>
So i'm trying to implement dynamic sub drop down menus for each of the three list items.
I originally tried adding a list within a list however that was just a shot in the dark and I never really expected it to work. I'm pretty stumped and am just looking for a pointer to the best way to go about doing this.
You can see this example, "Twitter Bootstrap Responsive Navbar with Multiple Dropdowns (Childrens)" here:
https://github.com/fontenele/bootstrap-navbar-dropdowns/blob/master/README.md
I am writing a menu with material design lite and I need a separator between two categories of item in this menu.
I recreated a simpler example of what I am doing here:
http://codepen.io/anon/pen/jbJXQP
In this example I would like to have something to delimit the two different categories. In the example "Trip planner" and "Layers" are some map related widget whereas "Help" and "Send feedback" are more info related.
Specificaly here:
<li class="mdl-menu__item"
<i class="material-icons" >layers</i>
Layers</li>
<li class="mdl-menu__item"
onClick="javascript:webapp.infoWidgets['otp-infoWidget-0'].show();" >
Help</li>
I am fairly new to web development (a few month), so I don't really have an idea of what is a good solution to do that.
For the separator it need to be something noticeable but not obtrusive to the user. I was thinking at just a straight black line in the middle but I don't know if this is possible.
An additional MDL class (I'm not familiar with MDL but sure there must be one, if not, just create one) for the first each special type of menu item which could then have a top border would be most logical.
So, let's assume that the first of each informational list item has a class of info:
Then we can do.
.mdl-menu__item.info {
border-top:1px solid lightgrey;
}
Codepen Demo
There are a variety of techniques for selecting which list item to apply the border to.
You can set a separate line, like you said. The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic). try this:
HTML
<li class="mdl-menu__item">
<i class="material-icons" >layers</i>
Layers</li>
<li><hr></li>
<li class="mdl-menu__item"
onClick="javascript:webapp.infoWidgets['otp-infoWidget-0'].show();" >
Help</li>
DEMO HERE
Note: You can style by CSS the <hr> - https://css-tricks.com/examples/hrs/
I was creating an un-ordered list and came to a point where I wanted to insert another list, that is, nest the lists. I'm using MS Expression Web (very good free tool) and it allows me to indent an <li> in the list by using the tab key. It puts another <ul> in and then puts in an <li> for the nested list.
However, when I switch to code view (which I use most of the time) the nested <ul> is flagged as not being allowed inside a <ul> by HTML 5.
If I view the page in FF, the nested list looks just as I would expect it to look. The bullets on the main list are black dots, the nested list is indented, and the bullets are circles.
If I change the <ul> tags to <ol> the nested list is numbered starting at zero.
So, I did a search to find out what tags can be included inside a <ul> or <ol> and came up with a lot of contradictory information - even here.
So, if HTML 5 does no allow almost any other tags inside a list (I've tried a lot of them to see what the parser says and they were flagged also such as <p>, <div>. etc.) - is there a tag with which I can create a classic outline with multiple levels?
Such as:
1 - Chapter One
a - Setting:
i - The City
ii - etc.
b - etc.
When I search on html outline -- I get references to the outline property to create outlines around elements - so there are borders and outlines??
Is there a "legal" way to produce an outline such as show above?
I can't believe there is no way of creating such an outline (legally)- I mean, outlines are a mainstay in documentation. Heck, table of contents are very often, if not just about always, nested outlines.
Is there a way to do it?
I have not found any way to create an outline except using nested lists.
I ran the following through a couple of validators and there were no errors or warnings.
So, I guess this answers my question.
<ul> <!--beginning of outer list -->
<li>
First line of outline, outer list
</li>
<li>
Second line of outline, outer list
<ul> <!--beginning of first nested list-->
<li>
First line of first nested list
</li>
<li>
Second line of 1st nested list
<ul> <!-- beginning 2nd nested list -->
<li>
First line of 2nd nested list
</li>
</ul> <!-- end of 2nd nested list -->
</li> <!-- end of list item in which 2nd nested list exists
</ul> <!-- end of 1st nested list-->
</li> <!-- end of of list item which contains 1st nested list -->
<li>
Third line of Outline, non nested
</li>
<ul> <!-- end outer list -->
Produces the following:
First line of outline, outer list
Second line of outline, outer list
First line of first nested list
Second line of 1st nested list
First line of 2nd nested list
Third line of Outline, non nested