I need to know how to create a navigation bar with Unsemantic framework (or 960gs).
My menu structure is
<div>
<ul>
<li></li>
</ul>
</div>.
I have tried so much, but still can't find out the problem.
EDIT
I use wordpress.So it creates navigation menu. the eventual code rendered in the browser is as follows:
<nav role="navigation" class="clearfix black grid-100 grid-parent mobile-grid-100 mar-top10 mar-bottom10" id="wp_nav_menu_wrapper">
<div class="grid-container">
<div class="menu">
<ul>
<li class="page_item page-item-2">
ُSample Page
</li>
<li class="page_item page-item-5">ُSample Page 2
</li>
</ul>
</div>
</div>
</nav>
While my Wordpress markup is as follows:
<div class='grid-100 height-auto black-gray-bg font-tahoma'>
<nav role='navigation' class='clearfix black grid-100 grid-parent mobile-grid-100 mar-top10 mar-bottom10' id='wp_nav_menu_wrapper'>
<div class='grid-container'>
<?php
wp_nav_menu();
?>
</div>
</nav>
</div>
The grid-container class is for the outer container and the grid-parent class for inner or nested containers. In your code you have this backwards.
The grid-parent class lets you align self-contained grids with normal grid items. The container holds all of the grid items. So the grid-parent is just an indicator that the or whatever will contain further items related to its scale and ordering on the page.
You can use this structure, or similar:
<nav class="grid-container">
<ul class="grid-100 grid-parent">
<li class="grid-25">...</li>
<li class="grid-25">...</li>
<li class="grid-25">...</li>
<li class="grid-25">...</li>
</ul>
</nav>
Related
i have a menu bar that has 3 anchor elements and i want to load the content of those elements while staying on the same page.
i want to do so without making linking to another html file that has those contents.
i have tried adding id's to the divs and linking to them with an anchor element but that doesnt make the other content disappear no matter what link i am on
<div class = "logo">
<img src="logo-removebg-preview.png">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Programs</li>
<li>Library</li>
<li>Gallery</li>
<li>عربي</li>
</ul>
</nav>
</header>
<main>
<section class = "inner-section">
<div class="sub-menu">
<ul>
<li>Who We Are</li>
<li>Our Values</li>
<li>History & Structure</li>
</ul>
</div>
<div class="wrapper">
<div id ="who-wrapper"class="who-body">
<h3>Who We Are?</h3>
here is the image
You can use anchor tag to call the specific section
Anchor content
<section id="id_of_section">
some content here
</section>
I am developing a page in Angular2/4 which has a left navigation bar. I put this left menu in a separate component and nesting this in the main component. Reason being I need to reuse this left menu in multiple pages/ components, however, different page will have different menu items. So, I am trying to pass the menu items from the main component through #Input() binding:
sidebar.component.ts:
#Component({
selector:'sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent{
#Input() innerContent:string;
....
sidebar.component.html:
<div id='mySidebar' class='sidebar-primary sidebar-animate' [class.sideBarShow]='isSideBarShow'
[class.sideBarHide]='!isSideBarShow' >
<ul class='goo-collapsible' style="margin-bottom:0px" >
<li class='header'><!--Common header in left menu-->
<div class='glyphicon glyphicon-arrow-left' style='float: left; width: 33%;padding-left:5px;cursor:pointer;' (click)='editTheme()'></div>
<div class='glyphicon glyphicon-search' style='float: left; width: 34%;cursor:pointer;'></div>
<div class='glyphicon glyphicon-remove' style='float: left; width: 33%;cursor:pointer;' (click)='sideBarClose()'></div>
</li>
</ul>
<ul class="goo-collapsible" style="margin-bottom:0px" [innerHTML] = "innerContent"><!--This should hold menu items depending upon main page-->
</ul>
</div>
mainpage.component.html:
-------------------------
sidebar [isSideBarShow]="isSideBarShowShared" [innerContent] =
"viewLayout" (notify) ="onNotify($event)"></sidebar>
mainpage.component.ts
-----------------------
....
ngOnInit() {
//this.nav.hide();
this.viewLayout = `<!li class='dropdown'><a (click)='changeHeaderTextAlign()'><span class='icon-table'></span> Top Navigation Bar</a>
<ul>
<li ><a href='#'>Content</a></li>
<li ><a href='#'>Comments</a></li>
<li ><a href='#'>Tags</a></li>
</ul>
</li>
<li><a href='#'><span class='icon-folder-open'></span><input type='color' value='#999999' (input)='headerColorChange($event)'> Header Image with Text</a></li>
<li class='dropdown'><a><span class='icon-user'></span><input type='range' min='0.1' max='1' step='0.1' (change)='setHeaderOpacity($event)'> Page Section</a>
<ul>
<li ><a href='#'>Group</a></li>
<li ><a href='#'>User</a></li>
</ul>
</li>
<li><a (click) = 'addDynamicComponent()'><span class='icon-cogs'></span> Footer and Social Media</a>
</li>`;
}
What I am seeing is that the style is being dropped from the innerHTML. I followed following instructions, but no luck:
Angular2 innerHtml binding remove style attribute
I learned that accessing DOM directly is not recommended in angular2 but any better/ recommended approach for this scenario? Any help would be very much appreciated!!
regards
The thing you are trying to achieve by innerHTML can also be done using ng-content which will enclose the specific component html in your sidemenu html.
Your sidemenu.html should look like this
<div id='mySidebar' class='sidebar-primary sidebar-animate' [class.sideBarShow]='isSideBarShow'
[class.sideBarHide]='!isSideBarShow' >
<ul class='goo-collapsible' style="margin-bottom:0px" >
<li class='header'><!--Common header in left menu-->
<div class='glyphicon glyphicon-arrow-left' style='float: left; width: 33%;padding-left:5px;cursor:pointer;' (click)='editTheme()'></div>
<div class='glyphicon glyphicon-search' style='float: left; width: 34%;cursor:pointer;'></div>
<div class='glyphicon glyphicon-remove' style='float: left; width: 33%;cursor:pointer;' (click)='sideBarClose()'></div>
</li>
</ul>
<ul class="goo-collapsible" style="margin-bottom:0px">
<!--This should hold menu items depending upon main page-->
<ng-content></ng-content>
</ul>
</div>
You application-main.component.html or any file where you want to include sidemenu comeponent should be like this :-
<div>
..... Blah Blah whatever page component html
<sidebar [isSideBarShow]="isSideBarShowShared" (notify)="onNotify($event)">
<!---- Whatever goes inside the component tag , is part of ng-content ---->
<!li class='dropdown'><a (click)='changeHeaderTextAlign()'><span class='icon-table'></span> Top Navigation Bar</a>
<ul>
<li ><a href='#'>Content</a></li>
<li ><a href='#'>Comments</a></li>
<li ><a href='#'>Tags</a></li>
</ul>
</li>
<li><a href='#'><span class='icon-folder-open'></span><input type='color' value='#999999' (input)='headerColorChange($event)'> Header Image with Text</a></li>
<li class='dropdown'><a><span class='icon-user'></span><input type='range' min='0.1' max='1' step='0.1' (change)='setHeaderOpacity($event)'> Page Section</a>
<ul>
<li ><a href='#'>Group</a></li>
<li ><a href='#'>User</a></li>
</ul>
</li>
<li><a (click) = 'addDynamicComponent()'><span class='icon-cogs'></span> Footer and Social Media</a>
</li>
</sidebar>
</div>
Also you can put multiple ng-content in a component using [select] attribute.
<ng-content select="[header]"></ng-content>
And in the other component file using it, just on the parent html tag give the name assigned in select as an attribute to the tag like this..
<div header> Blah blah..... </div>
My code is as follows:
<h3 class="ds-option-set-head">Compartilhar</h3>
<div class="ds-option-set" id="sharebar">
<ul>
<li onclick="shareFunction('fb')"><img src="themes/UFSC_producao/images/facebook.svg"></img></li>
<li onclick="shareFunction('tw')"><img src="themes/UFSC_producao/images/twitter.svg"></img></li>
<li onclick="shareFunction('lk')"><img src="themes/UFSC_producao/images/linkedin.svg"></img></li>
<li onclick="shareFunction('gp')"><img src="themes/UFSC_producao/images/google-plus.svg"></img></li>
</ul>
</div>
These images just appears at the initial page mysite/xmlui and I don't know why. Any suggestions?
Here is my code:
<div class="wrap">
<div id ="header">
<a href="index" class = "logo">
<img src = "logo.png" alt = "" />
</a>
<nav class="navigation">
<ul>
<li>Share</li> |
<li>Join</li> |
<li>See Safty Tips</li> |
<li>Settings</li>
</ul>
</nav>
</div>
<div class="wrapper">
<img src="accident.png" alt="">
<div id="right-content">
<h2>Hit and Run No Injuries</h2>
<p>2.610 miles from your new neighbor<br />
May 20, 2015 at 12.34 PM </p>
<h4>California HWP 2 - High Level</h4>
</div>
</div>
<div class="wrap">
<ul class="secure_v5">
<li id="li-incident">
<a class="inviteLink dark" href="/v5/Resources.aspx?IFrameURL=Invitationv5&vn=&gORn=1">See Incident Location</a>
</li>
<li id="login-signup">
<a class="button dark" href="V4/Login.aspx?v5=1">Share Incident with Friends</a>
</li>
</ul>
</div>
<div class="thanks">
<p>Sincerely,<br />
The AlertID Team</p>
</div>
<p style="text-align:center;">This sponsor is helping to protect your neighborhood</p>
<div class="footer-links">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
and here is jsfiddle , (didn't include images)
When i run this code, some alignment is not correct,
I need something same like this
I just confused with which exact css can be used, Can anyone help me please?
Thanks,
Use HTML tables to control the design layout and some presentation. You may be used to using pure CSS layouts for your web pages, but that approach just won’t hold up in an email environment.
Use inline CSS to control other presentation elements within your email, such as background colors and fonts.
You just put div #right-content to right
try it on CSS.
#right-content {
float:right;
width:600px;
}
#right-content h2{
text-align:center;
}
I create a little attribute to h2 inside div #right-content
and define a fixed width for right-content. It's necessary because of attribute float: right.
I have created the plunkr found here: http://plnkr.co/edit/gqtFoQ4x2ONnn1BfRmI9?p=preview
This menu works as expected on a desktop/laptop.. But it does not look as it does on a desktop.
I imagine the CSS is correct, but something wrong with the viewport settings??
HTML:
<body ng-controller="MainCtrl" ng-style="{true: {overflow: 'hidden'}, false: {}}[toggleMenu]">
<div class="header compact" role="banner">
<div class="menu" ng-class="{true: 'active', false: ' '}[toggleMenu]" ng-style="{true: {width: menuWidth}, false: {}}[toggleMenu]">
<h2 ng-click="toggleMenu = true">Menu</h2>
<div class="nav" ng-style="{ 'width' : winWidth, 'height' : winHeight }">
<ul role="navigation" class="nav-main">
<li class="active">
Home
</li>
<li>
<a href="../makani/challenge/" data-ga-event="Header,Navigate,The Challenge">The
Challenge</a>
</li>
</ul>
<ul role="contentinfo" class="nav-aux">
<li>
FAQ
</li>
<li>
About Us
</li>
</ul>
</div>
<button type="button" ng-click="toggleMenu = false">Close</button>
</div>
</div>
</body>
You are not using any vendor prefixes in your css. Even iOS 8 requires them to be present. So in addition to transform also -webkit-transform.
See http://caniuse.com/#search=transform
BTW: Nice menu.