Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add dividers and fix bug in siteNav #1063

Merged
merged 19 commits into from
Mar 5, 2020
Merged

Add dividers and fix bug in siteNav #1063

Changes from 18 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
538ff88
add _site to ignore list
Tejas2805 Feb 16, 2020
52e1afa
update highlighted text bg color
Tejas2805 Feb 17, 2020
f3d3f34
Merge branch 'master' of https://github.com/MarkBind/markbind
Tejas2805 Feb 27, 2020
5738a2b
add <hr> to code
Tejas2805 Feb 27, 2020
145b97c
update
Tejas2805 Feb 27, 2020
7132f95
add <br> to output
Tejas2805 Feb 27, 2020
d5b91ff
add <br> to code
Tejas2805 Feb 27, 2020
27c11d7
update to make it consistent
Tejas2805 Feb 27, 2020
34d2563
correct input indentation
Tejas2805 Feb 27, 2020
f64773a
update
Tejas2805 Feb 27, 2020
8b5e5d9
update code to code blocks
Tejas2805 Feb 28, 2020
8ef5aa5
Update siteNavigationMenus.mbdf
Tejas2805 Feb 28, 2020
45331b0
Update siteNavigationMenus.mbdf
Tejas2805 Feb 28, 2020
5f0a6ab
Update docs/userGuide/syntax/siteNavigationMenus.mbdf
Tejas2805 Mar 1, 2020
cd3e2de
Update siteNavigationMenus.mbdf
Tejas2805 Mar 1, 2020
3cc213d
Update horizontal rules link to same page
Tejas2805 Mar 2, 2020
ba9078f
add hr to code and output
Tejas2805 Mar 4, 2020
d4b6923
Update siteNavigationMenus.mbdf
Tejas2805 Mar 4, 2020
3eb2ce3
remove extra whitepace
Tejas2805 Mar 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 19 additions & 15 deletions docs/userGuide/syntax/siteNavigationMenus.mbdf
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,26 @@
**A _Site Navigation Menu_ (==_siteNav_ for short==) is a fixed menu on the ==left edge== of a page**, that can be used to show a road map of the main pages of your site.

Steps to add a siteNav:
1. Format your siteNav as an unordered Markdown list and save it inside the `_markbind/navigation` directory.
1. Format your siteNav as an unordered Markdown list and save it inside the `_markbind/navigation` directory. You may include dividers in the siteNav via <a href="{{ baseUrl }}/userGuide/readerfacingfeatures#horizontal-rules">horizontal rules</a>.
2. Specify the file as the value of the `siteNav` attribute in the `<frontmatter>` of the page.

<div class="indented">

{{ icon_example }} Here is an example siteNav code saved in **`_markbind/navigation/`**`mySiteNav.md` file:

<box>

<code>
* [:house: Home]({{ showBaseUrlText }}/index.html)<br>
* Docs<br>
&nbsp;&nbsp;* [User Guide]({{ showBaseUrlText }}/ug.html)<br>
&nbsp;&nbsp;* [Dev Guide]({{ showBaseUrlText }}/dg.html)<br>
* [Search]({{ showBaseUrlText }}/search.html)<br>
&nbsp;&nbsp;* [Google Search](https://www.google.com/)<br>
&nbsp;&nbsp;* [YouTube Search](https://www.youtube.com/)<br>
* [Contact]({{ showBaseUrlText }}/contact.html)
</code>
</box>
```{.no-line-numbers}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think adding a divider in the example would be helpful, since we mentioned it above?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should. So that they can understand how it looks and accordingly decide whether to use or not?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about this?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, I don't see any changes here?
Screenshot 2020-03-04 at 12 19 05 PM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah my bad. I was asking you whether to do it or not. Didn't realise you were saying to implement and show. I have done it now. Sorry for the confusion.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, sorry for the lack of clarity!

* [:house: Home]({{ baseUrl }}/index.html)
---
* Docs
* [User Guide]({{ baseUrl }}/ug.html)
* [Dev Guide]({{ baseUrl }}/dg.html)
---
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bit of a nit, but let's not leave trailing spaces behind 🙂

You should also be able to configure your editor to automatically remove trailing whitespace behind, so you don't have to worry about it yourself.

* [Search]({{ baseUrl }}/search.html)
* [Google Search](https://www.google.com/)
* [YouTube Search](https://www.youtube.com/)
---
* [Contact]({{ baseUrl }}/contact.html)
```

Here's how another page can make use of the above siteNav:

Expand All @@ -37,6 +37,7 @@ Here's how the above siteNav will appear:

<ul style="list-style-type: none; margin-left:-1em">
<li style="margin-top: 10px"><a class="site-nav__a" href="/index.html">🏠 Home</a></li>
<hr>
<li style="margin-top: 10px">
<button class="dropdown-btn">Docs <i class="dropdown-btn-icon">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
Expand All @@ -47,12 +48,15 @@ Here's how the above siteNav will appear:
</ul>
</div>
</li>
<hr>
<li style="margin-top:10px"><a class="site-nav__a" href="">Search</a>
<ul style="list-style-type: none; margin-left:-1em">
<li style="margin-top: 10px"><a class="site-nav__a" href="http://www.google.com">Google Search</a></li>
<li style="margin-top: 10px"><a class="site-nav__a" href="http://www.youtube.com">YouTube Search</a></li>
</ul>
</li>
<hr>
<li style="margin-top:10px"><a class="site-nav__a" href="">Contact</a></li>
</ul>

</div>
Expand Down Expand Up @@ -85,7 +89,7 @@ You may have additional HTML and Markdown content in a <tooltip content="the fil

More than one siteNav file can be in `_markbind/navigation/` directory but a page may not have more than one siteNav.

A siteNav has a fixed width of 300 pixels for its contents. A siteNavs is [_responsive_](https://www.w3schools.com/html/html_responsive.asp) in that it will collapse to a menu button when the screen width is smaller than 992 pixels. It will then be completely hidden when the screen size is smaller than 576 pixels.
A siteNav has a fixed width of 300 pixels for its contents. A siteNav is [_responsive_](https://www.w3schools.com/html/html_responsive.asp) in that it will collapse to a menu button when the screen width is smaller than 992 pixels. It will then be completely hidden when the screen size is smaller than 576 pixels.

There is no limit to the number of nesting levels or the number of items in the menu, but note that any content exceeding a height of 1000 pixels will be cut off.

Expand Down