I would like to make a profile menu like in Gmail what contains the user's display name and his user name and also two buttons with settings and logout. I would like to make it in angular 8.
http://prntscr.com/q1vd8y
<li>
<!-- user profile -->
<div class="profile">
<img class="avatar" src="" /><span></span>
<!-- more menu -->
<ul class="menu">
<li class="name">{{name}}</li>
<li class="name">{{useremail}}</li>
<li class="name">{{visiblename}}</li>
<li>Settings</li>
<li><a [routerLink]='["/logout"]'>Log out</a></li>
</ul>
</div>
</li>
</ul>
https://material.io/design/
here it is, my friend, the one and only, Material Design !
you can find css frameworks that will help you do it like
https://materializecss.com/
for example !
https://material.angular.io/ for angular
Related
How can I delete all thoses div around my menu create with menu_block for drupal 7 ?
I want to change this :
<div class="region region-nav">
<div class="content">
<div class="menu-block-wrapper menu-block-3 menu-name-menu-prive parent-mlid-0 menu-level-2">
<ul class="menu">
<li class="first expanded menu-mlid-559" style="width: 397px;">
Avantages
<ul class="menu">
<li class="first leaf menu-mlid-596">
Ecologie
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
into this :
<ul class="menu">
<li>
link
<ul class="menu">
<li>
link
</li>
</ul>
</li>
</ul>
Thank you
You will need to add new templates for your block and the region that holds it, in order to get rid of some of the markup.
Take a look at Drupal 7 Template Suggestions
Your block template name would look like this: block--menu-block.tpl.php. And for the markup, can be just
<?php print $content ?>
The region template name would look like this `region--YOUR_REGION_NAME.tpl.php``. And for the markup, can be just
<?php print $content ?>
(Don't forget to flush the caches after adding the new templates)
I'm building a LHN in Sitefinity and ran into an issue styling it. When a page is set as the active page, it gets the sfsel class. Unfortunately, it also applies it to the parent page when a subpage is active. I need to get the styling so when a subpage is active, only that list item is highlighted, but when only the parent "About" page is active, it still gets highlighted.
http://jsfiddle.net/4NnaZ/1/
<div class="sfNavWrp sfNavTreeviewWrp leftnav">
<div class="k-widget k-treeview" tabindex="0" role="tree" aria-activedescendant="C001_ctl00_ctl00_navigationUl_tv_active">
<ul class="sfNavTreeview sfNavList k-group k-treeview-lines" id="C001_ctl00_ctl00_navigationUl" data-role="treeview">
<li class="k-item k-first k-last" data-uid="ceac0efa-1b50-46c7-a351-945f05a6eb87" role="treeitem" data-expanded="true" aria-expanded="true">
<div class="k-top k-bot"><span class="k-icon k-minus"></span><a class="sfSel k-in" href="../about">About</a>
</div>
<ul id="C001_ctl00_ctl00_ctl03_ctl00_childNodesContainer" class="k-group" style="display: block;">
<li class="k-item" data-uid="3b1f4e90-1945-4c93-a770-43787527d7bf" role="treeitem" id="C001_ctl00_ctl00_navigationUl_tv_active">
<div class="k-top"><a class="sfSel k-in k-state-focused" href="locations">Locations</a>
</div>
</li>
<li class="k-item" data-uid="48d48d44-55ee-4bf7-9fcd-20380c18b991" role="treeitem">
<div class="k-mid">Careers
</div>
</li>
<li class="k-item" data-uid="267e4a18-8489-45c2-bef3-1efcba63916f" role="treeitem">
<div class="k-mid">Producer Board
</div>
</li>
<li class="k-item k-last" data-uid="d75d7989-3815-49b3-856c-c4d24dcd5dc8" role="treeitem">
<div class="k-bot">Contact Information
</div>
</li>
</ul>
</li>
</ul>
</div>
isn't k-state-focused the class you should use to highlihgt only current link/page ?
I believe this is a jQuery script producing this classname.
You can modify your code to set a class for that purpose , http://www.sitefinity.com/developer-network/forums/general-discussions-/highlight-current-page
I have the below HTML which I want to translate into wordpress function "**wp_nav_menu()**"
<ul class="nav navbar-nav">
<li id="about-menu">
About Us
<div id="about-us">
.....
inner div(s) and
Paragraphs etc
......
</div>
</li>
<li id="contact-menu">
Contact Us
<div id="contact-us">
.....
inner div(s) and
Paragraphs etc
......
</div>
</li>
<li>News</li>
</ul>
Any Idea on how to do it?
You can create a custom nav walker. There are no docs on wordpress.org, but you could simply take a look at an existing walker
I'm creating my own wordpress template and I've coded a jQuery drop down menu that works statically but now I'm trying to make it dynamic the css is messed up. The drop down works but the menu doesn't displaying correctly.
The main menu displays vertical instead of horizontal and the secondary menu is horizontal, instead of vertical. Also the orange type for the main menu isn't displaying.
Here's a working static version
I hope I'm explaining myself thoroughly, if you need any more info please let me know.
Here is my wordpress template code
<div class="box">
<ul id="ldd_menu" class="ldd_menu">
<li>
<span>Menu</span>
<!-- Increases to 510px in width-->
<div class="sub_wrap">
<div class="ldd_submenu">
<nav>
<li class="ldd_heading"></li>
<?php wp_nav_menu(array('menu' => 'main_nav')); ?>
</nav>
<a class="ldd_subfoot" href="#"> Accessibility Link</a>
</div>
</li>
</ul>
</div>
<div></div>
I would suspect your code is not handling the output format of the wp_nav_menu method. Now I am not sure of your exact version, but newer versions will out put like this. So you will get extra div added in that you might not expect and the way the child menus are output may not be what you expect. Also, as the previous people said your code is not quite right, missing some tags.
<div class="menu-id-container">
<ul class="nav-menu" id="menu-id">
<li class="..." id="..">LINK
<ul class="sub-menu">
<li>Child LINK1</li>
</ul>
</li>
<li class="..." id="...">LINK2</li>
</ul>
</div>
Attempt 1
<div class="bs-docs-example">
<ul class="nav nav-tabs">
<li class="active">Homeaaa</li>
<li>Profilefff</li>
<li>Messagesbbb</li>
</ul>
</div>
JSfiddle
I have also tried setting a data-toggle attribute to "tab", but that only allowed me to click between tabs, it didn't separate the aaa/fff/bbb into different tabs.
This should be possible to be done without any JavaScript.
Attempt 2
The closest I've gotten to a working one is:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Stir
</li>
<li>
Drink
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="ter">fff</div>
<div class="tab-pane" id="gin">ggg</div>
</div>
</div>
JSfiddle
But this didn't change the URL of the viewer to /#ter or /#gin on click. Also it doesn't seem to work normally in the fiddle...
Your jsFiddle works as expected -- anchor links take you to #gin and #ter. On the other hand, I believe you need to use some JavaScript to actually change the active tab. Here's a try that uses a bit of jQuery:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Stir
</li>
<li>
Drink
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="ter">fff</div>
<div class="tab-pane" id="gin">ggg</div>
</div>
</div>
JavaScript:
$(document).ready(function() {
$(".nav-tabs li a").click(function() {
var li = $(this).parent("li");
var wch = this.getAttribute("href");
$(li).addClass("active"); //make current li active
$(li).siblings("li").removeClass("active"); //make others inactive
$(".tab-content div").removeClass("active"); //make all tabs inactive first
$(wch).addClass("active"); //activate our tab;
return false; //don't change URL
});
});
And a little demo: little link. Note that the use of jQuery isn't needed; you can easily convert to vanilla JavaScript if you want to avoid using it.
Hope that helped!