I am to implement this structure with kentico
<li class="megamenu_button">Mega Menu</li>
<li>Home</li>
<li class="aa">About Us<!-- Begin Item -->
<div class="dropdown_4columns dropdown_container"><!-- Begin Item Container -->
<div class="col_12">
<img class="img_left" src="images/about_us_img.png" width="125" height="146">
<ul class="list_unstyled">
<li>FreelanceSwitch</li>
<li>Creattica</li>
<li>WorkAwesome</li>
<li>Mac Apps</li>
</ul>
</div>
</div><!-- End Item Container -->
</li><!-- End Item -->
</ul><!-- End Mega Menu -->
The design is meant to have at least 6 menu headers with sub-menu each.
The challenge is I don't even know how to approach the design. I am currently using aspx master template. All suggestion is welcome.
Attached to this is an image of the expected production. I have the that suit the listing above.
You will need to make use of nested repeaters (CMSBasic Repeaters).
May you find below useful links on how to do it.
Option 1
Option 2
Related
I am trying to get the output as follows:-
pic-1
....
required ouput
i am writing the following snippet for the footer component-
<div class="ftrsection" data-sly-repeat="${currentPage.listChildren}">
<h3 data-sly-test.child="${item.title}" >${child}</h3>
<ul class="footermenu">
<li data-sly-repeat.child1="${currentPage.listChildren}">
${child1.title}
</li>
</ul>
</div>
And i am geeting the following output-Generated output.
The structure of my site in aem is Site structure in aem.
I am trying to get the child pages of the child pages of the root page.
The first level child pages (
Explore, Experience, Stay, Taste, This Is Bhubaneswar) should be headers of the footer as in pic-2. And the child pages( level 2)( Heritage Circuits,
Temples) in those child pages(level 1)(Explore) should be under them. But i am getting the wrong output.
Your second iteration (data-sly-repeat) is listing the children of the current page again. I believe you want to list subpages of the current item:
<div class="ftrsection" data-sly-repeat="${currentPage.listChildren}">
<h3 data-sly-test.child="${item.title}" >${child}</h3>
<ul class="footermenu">
<li data-sly-repeat.subpage="${item.listChildren}">
${subpage.title}
</li>
</ul>
</div>
So I'm trying to build a nice page for a blog, but the challenge is I want it to be the most proper HTML5 compliant and mobile/seo friendly.
I have made what I believe to be a proper HTML5 page that looks like this :
<!-- Header -->
<header>
<h1>Title of the page</h1>
<h2>Subtitle of the page</h2>
<!-- nav -->
<nav>
<ul>
<li>Page one</li>
<li>Page two 2</li>
<li>Page three 3</li>
<li>Page four 4</li>
</ul>
</nav>
</header>
<!-- last articles -->
<section>
<article>
<header>
<h2>Article title</h2>
</header>
Content of the article.
<aside>
Related post or other links.
</aside>
<footer>
Read the full article.
<ul>
<li>Share on Facebook</li>
<li>Tweet it</li>
</ul>
</footer>
</article>
<article>
<header>
<h2>Article title</h2>
</header>
Content of the article.
<aside>
Related post or other links.
</aside>
<footer>
Read the full article.
<ul>
<li>Share on Facebook</li>
<li>Tweet it</li>
</ul>
</footer>
</article>
</section>
<!-- sidebar -->
<aside>
<h2>Sidebar</h2>
<h3>Social media</h3>
<ul>
<li>Facebook account</li>
<li>Twitter account</li>
<li>Github account</li>
</ul>
<h3>Last comments</h3>
<nav>
<ul>
<li>Comment 1</li>
<li>Comment 2</li>
<li>Comment 3</li>
</ul>
</nav>
</aside>
<!-- footer -->
<footer>
© 1264-2016 - Handsome coder (me) industry
</footer>
I don't know about you but I think it looks like a proper semantic use of HTML5 tags.
Now I want it to be responsive and two options are presented.
I do all the css by myself (maybe using normalize.css to prevent weird stuff from happening on some browsers.)
I use a lightweight framework, for example Skeleton.
Both would mean the use of classes but also of probably the use of div tags to wrap certain parts of the pages and I'm not sure it is how I should do it...
I'm trying to avoid the over use of div tags, especially the nested div that look like ol' of ten years ago.
I tried to use the HTML5 Boilerplate, but I just looked at the source code of their main page which is quite simple in appearance and I found div in div in div in div in div. I mean, what the hell ?
So what do you think I should do to build responsive proper and semantic HTML5 pages ? Do you have any example ?
Thank you for reading me.
Have a nice day.
As far as I understood, you want a way to build simple, semantic, lightweight pages (which should be the aim of us all).
Adding / nesting divs is not a crime. A div by itself is just a blank container which holds very little relevance to the overall HTML document structure, you can use as much divs as you like. Focus on learning HTML/5 Semantics and learning how to combine the new tags so that your page can be easy to read and describe (by the bots).
Example of a well structured simple page. (Google images)
Concerning grid systems - My advice is to learn SASS and combine it with Bourbon.io's grid system called Neat. It is pretty straightforward and easy to understand/implement. The grid alignment is sorted in a super-simple manner which gets your code down to something like:
I'm having a dropdown menu based on pureCss. This menu can contain 20 or more entries:
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
Menu
<ul class="pure-menu-children">
<li class="pure-menu-item">Entry</li>
<li class="pure-menu-item">Entry</li>
[... many more entries ...]
<li class="pure-menu-item">Entry</li>
</ul>
</li>
</ul>
</div>
See this codepen
On smaller screens this quickly leads to the user needing to scroll down to reach the bottom entries - which can be really painful/impossible without a mousewheel, as the hovering is often lost.
Is there a way to modify the CSS so that the entries automatically get wrapped into a second or even third column before the bottom is reached?
I have a menu structure I built in HTML+CSS that I would like to incorporate into a WordPress menu, but I am new to extending the Walker class and was wondering if someone could show me an example of how it might work. The code I would like to output is below:
<!-- Menu Start -->
<nav class="collapse navbar-collapse menu">
<ul class="nav navbar-nav sf-menu">
<li><a id="current" href="front-page.php">Current Page</a></li>
<li>Top Level Menu <span class="sf-sub-indicator"><i class="fa fa-angle-down"></i></span>
<ul>
<li>Child Link</li>
</ul>
</li>
<li>Another Link No Children</li>
</ul>
</nav>
<!-- Menu End -->
The nav and ul tags wrap the entire menu and do not need repeating.
The li for a single page without any child pages just needs an anchor tag inside of a bare li, except if the page is current, and add the appropriate id to the a tag.
If there is a parent item with children, display the parent link first with a "sf-with-ul" class on the a tag, then make another ul group with its li children have the same class as well.
Could anyone point me in the right direction here on how to accomplish this? Thank you.
Unfortunately I don't have a massive amount of time to write an example right now but I can send you the article that goes into decent detail on how to create walkers in WordPress.
How to add custom HTML to wp_nav_menu?
Using this as a guide it should be possible to add classes where you want to add them and structure your menu. If not I can try and whip an example up later.
I have a project developed using ASP.net.
I have placed the menu bar in the master page and I need to change the active menu bar item according to the loaded page.
Here is my code.
Site.Master
<div class="menu-bg">
<ul class="menu wrapper">
<li>Home page</li>
<li>Our Company</li>
<li>Our services</li>
<li>Our projects</li>
<li>Careers</li>
</ul>
</div>
For example, if I load Default.aspx page the Menu bar item "Home Page" should get a different color.
Is there any possible way to do this?
Please help me.