Working on an Angular SPA whereby am using bootstrap as my css framework. I have created different components and included them in the main app.component.html file. All are aligned properly except the bootstrap 4 sidebar,, I need it to be fixed and should be on the far-left of the screen.
The problem is that it pushes the main body down..
<!--Include Navbar which works well-->
<app-navbar></app-navbar>
<div class="container">
<!-- include sidebar-->
<app-sidebar></app-sidebar>
<router-outlet></router-outlet>
</div>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
About
</li>
<li>
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
Related
I need to be able to add a link to "Home" and "Pages" when clicking it but also to collapse and show the li items from below.
I changed "#homeSubmenu" from a href with a link but when clicking it does not collapse.
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
About
</li>
<li>
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
Use data-bs-target for the Collapse and href for the link..
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
All day I'm struggling to create a custom menu walker which will fit the markup that must be on the frontend.
Here is the desired markup:
<nav class="menu cf">
<div class="menu__inner cf">
<ul class="menu__list">
<li class="menu__item menu__item--first">
Menu item 1
</li>
<li class="menu__item menu__item--has_children cf">
<a href="" class="menu__link">
Menu item 2
</a>
<a href="" class="menu__link--toggle">
<i class="icon-arrow-thin-down"></i>
</a>
<div class="sub_menu__wrap">
<div class="container">
<div class="gr-12 gr-3#lg">
<div class="sub_menu__heading">Menu heading (parent menu title)</div>
</div>
<div class="gr-12 gr-9#lg">
<ul class="sub_menu">
<li class="sub_menu__item gr-12 gr-4#lg">
Submenu item 1
</li>
<li class="sub_menu__item gr-12 gr-4#lg">
Submenu item 2
</li>
<li class="sub_menu__item gr-12 gr-4#lg">
Submenu item 3
</li>
<li class="sub_menu__item gr-12 gr-4#lg">
Submenu item 4
</li>
<li class="sub_menu__item gr-12 gr-4#lg">
Submenu item 5
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menu__item menu__item--last">
Menu item 3
</li>
</ul>
</div>
I have some examples of custom class that extends Walker_Nav_Menu
but I think those examples are no good.
Here is what I have so far: http://pastebin.com/qnPx9J67
IMPORTANT! I want to have BEM methodology on my classes, as like:
$menuListClass = 'menu__list';
$menuItemClass = 'menu__item';
$menuLinkClass = 'menu__link';
$subMenuClass = 'sub_menu';
$subMenuClass = 'sub_menu';
$submenuItemClass = 'sub_menu__item';
$subMenuLinkClass = 'sub_menu__link';
I also want to keep some default Wordpress classes, but in this format:
Examples:
.menu-item-has-children -> .menu__item--has_children
.current-menu__item -> .menu__item--current
I'm hoping someone could help me out with this since I don't know very good PHP. :)
Source link: https://developer.wordpress.org/reference/classes/walker_nav_menu/
I'm using materialize as a UI framework in my rails app, and everything is working correctly except the 'material-icons' 'menu' option isn't working properly.
The full code is further below, but this is the piece that is not working appropriately:
<i class="material-icons">menu</i>
Instead of turning into a hamburger icon, when I shrink the browser to trigger the responsiveness, it just displays the text node 'menu'. I can't figure out what I am doing wrong. Everything else is working.
This is the entire nav/dropdown structure:
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>My Profile</li>
<li>My Courses</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
<!-- Dropdown Structure -->
<ul id="dropdown2" class="dropdown-content">
<li>My Profile</li>
<li>My Courses</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
<header>
<nav class="z-depth-2">
<div class="container">
<div class="nav-wrapper">
OppSim
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<!-- web view -->
<li>Courses</li>
<li>Signup</li>
<li>Login</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">JTB<i class="material-icons right"></i></a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<!-- mobile view -->
<li>Courses</li>
<li>Signup</li>
<li>Login</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown2">JTB<i class="material-icons right"></i></a></li>
</ul>
</div>
</div>
</nav>
</header>
Or maybe I should stick with golf.
To use icons in materalize you have to include this font
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
as per their official documentation here
I created nav-pills with Twitter bootstrap 3.
Everything is fine except dropdowns.
Documentation shows the layout for tab links, but not for the content: http://getbootstrap.com/components/#nav-dropdowns
I want to show content when user selects one of the dropdown links.
Fiddle is like this: http://jsfiddle.net/mavent/skL5H/3/
<div class="tabbable">
<ul class="nav nav-tabs nav-pills" id="myTab">
<li class="active"> Part 1
</li>
<li class=""> Part 2
</li>
<li class="dropdown"> Activity <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
</ul>
</li>
</ul>
<br>
<div class="tab-content">
<div class="tab-pane active" id="tab1">aaaaaaaaaaaa</div>
<div class="tab-pane" id="tab2">bbbbbbbbbbbb</div>
<div class="tab-pane" id="tab3">cccccccccccccc</div>
<div class="tab-pane" id="tab4">dddddddddddddd</div>
</div>
</div>
Add data-toggle="dropdown" to the links in the .dropdown-menu.
http://jsfiddle.net/skL5H/5/
this is the source - the link is within an unordered list (Configuration) and the item I want to click on is KPI Types - how with webdriver?
<div id="headerList">
<div id="wrap">
<div id="meta">
</div>
<div id="page">
<div id="header">
</div>
<div id="nav">
<ul class="sf-menu">
<li>
</li>
<li class="secondary">
</li>
<li class="secondary">
</li>
<li>
</li>
<li>
Configuration
<ul>
<li>
Validation
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
KPI Types
</li>
</ul>
</li>
</ul>
</div>
<h1>Kpi</h1>
<div id="messages"></div>
and the link has text KPI Types
If I understand you correctly...
By Text: KPI Types
By XPath: //a[text()='KPI Types']
In c#:
driver.FindElement(By.LinkText("KPI Types")).Click();
driver.FindElement(By.XPath("//a[text()='KPI Types']")).Click();
Or if you want to restrict it specifically to the Configuration list:
By XPath: //li[text()='Configuration']//a[text()='KPI Types']
In c#:
driver.FindElement(By.XPath("//li[text()='Configuration']//a[text()='KPI Types']")).Click();
Does that answer your question?