I have the following HTML code:
<li>
<i class="fa fa-dashboard fa-fw"></i> Dashboard
</li>
The Code displays the menu item as the following image:
I want to replace the link with #Html.ActionLink in Razor code, I try this:
<li>
<i class="fa fa-dashboard fa-fw">#Html.ActionLink("Dashboard", "Index", "Home")</i>
</li>
But unfortunately it displays the menu item as:
I also tried:
<li>
#Html.ActionLink("Dashboard", "Index", "Home", new { #class = "fa fa-dashboard fa-fw" })
</li>
The style overrides the text font and displays the result as:
How can I do this correctly?
Try this:
<li>
<a href="#Url.Action("Dashboard", "Home")">
Dashboard <i class="fa fa-dashboard fa-fw"></i>
</a>
</li>
Related
For reference:
The tool I'm using: https://materializecss.com/
The outcome I have: https://imgur.com/a/3s7ekTS
The outcome I want: https://imgur.com/a/8BJExER
I have a dropdown on the navbar of my webpage. Before adding the class
.sidenav-trigger
To the following :
<li><i class="material-icons">settings</i>Settings</li>
Which is sat inside of the following <ul>:
<ul id='dropdown1' class='dropdown-content'>
<li>
<i class="material-icons">search</i>Search
</li>
<li>
<i class="material-icons">person</i>Profile
</li>
<li>
<i class="material-icons">public</i>Explore
</li>
<li>
<i class="material-icons">settings</i>Settings
</li>
<li>
<i class="material-icons">arrow_back</i>Logout
</li>
</ul>
The dropdown looks as intended.
Simply removing this class won't work as I need it in order to have a pullout sidebar.
How can I resolve the alignment of the text in the dropdown?
Try setting the height to auto !important as following:
<li>
<a href="" data-target="slide-out-settings" class="sidenav-trigger" style="color: black; height: auto !important;">
<i class="material-icons">settings</i>
Settings
</a>
</li>
I"m working on a wordpress site and I don't have much experience with php. On wordpress you can enter a url for the site. I need help with creating an if statement as if a url is present the links to the url entered in on wordpress.
How does it works in wordpress when a user can input a url on different icons. If they do the icon needs to be clickable like href.
Here is the code:
<div id="legend">
<div class="text-center">
<p>As we continue to track performance and goal achievement, TBD spaces will be filled in with <br />content meant to support and react to continuing progress and opportunities.</p>
<ul>
<li class="oem-event"><span>OEM Event</span></li>
<li class="fa-icon"><i class="fa fa-search" aria-hidden="true"></i> Research</li>
<li class="fa-icon"><i class="fa fa-check-circle" aria-hidden="true"></i> Audit</li>
<li class="fa-icon"><i class="fa fa-lightbulb-o" aria-hidden="true"></i> Planning</li>
<li class="fa-icon"><i class="fa fa-car" aria-hidden="true"></i> Inventory</li>
<li class="fa-icon"><i class="fa fa-commenting" aria-hidden="true"></i> Blog</li>
</ul>
<ul>
<li class="fa-icon"><i class="fa fa-balance-scale" aria-hidden="true"></i> Comparison</li>
<li class="fa-icon"><i class="fa fa-link" aria-hidden="true"></i> Sitelink</li>
<li class="fa-icon"><i class="fa fa-window-maximize" aria-hidden="true"></i> Landing Page</li>
<li class="fa-icon"><i class="fa fa-cog" aria-hidden="true"></i> Custom</li>
<li class="fa-icon"><i class="fa fa-plus-circle" aria-hidden="true"></i> Social Post</li>
<li class="fa-icon"><i class="fa fa-folder" aria-hidden="true"></i> Migration </li>
<li class="fa-icon"><i class= "fa fa-font-awesome" aria-hidden="true"></i> Enhancement </li>
<li class="fa-icon"><i class="fa fa-certificate" aria-hidden="true"></i> WOW </li>
<li class="fa-icon"><i class= "fa fa-google" aria-hidden="true"></i>Google Post</li>
</ul>
</div>
</div>
I've tried this so far:
<?php
// The Regular Expression filter
$reg_exUrl = "/(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/";
// The Text you want to filter for urls
$text = "The text you want to filter goes here. http://google.com";
// Check if there is a url in the text
if(preg_match($reg_exUrl, $text, $url)) {
// make the urls hyper links
echo preg_replace($reg_exUrl, "{$url[0]} ", $text);
} else {
// if no urls in the text just return the text
echo $text;
}
?>
However I don't think this is the right thing for what I need to do
My html look's like this below and I am also using Bootstrap. I would like the menu to stay open on my sidebar, after i have selected it.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="treeview-menu" id="submenu_toggle">
<li>
<a href="tickets.php">
<i class="fa fa-circle-o sub_menu_fa"></i>Inbox
</a>
</li>
<li>
<a href="tickets.php?status=assigned">
<i class="fa fa-circle-o sub_menu_fa"></i>Mine
</a>
</li>
<li>
<a href="tickets.php?status=overdue">
<i class="fa fa-circle-o sub_menu_fa"></i>Overdue
</a>
</li>
<li>
<a href="tickets.php?status=closed">
<i class="fa fa-circle-o sub_menu_fa"></i>Closed
</a>
</li>
</ul>
Since it's not a one page application, consider using this. You are required to load this js & css on every page in menu item.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="treeview-menu" id="submenu_toggle">
<li>
<a href="tickets.php">
<i class="fa fa-circle-o sub_menu_fa"></i>Inbox
</a>
</li>
<li>
<a href="tickets.php?status=assigned">
<i class="fa fa-circle-o sub_menu_fa"></i>Mine
</a>
</li>
<li>
<a href="tickets.php?status=overdue">
<i class="fa fa-circle-o sub_menu_fa"></i>Overdue
</a>
</li>
<li>
<a href="tickets.php?status=closed">
<i class="fa fa-circle-o sub_menu_fa"></i>Closed
</a>
</li>
</ul>
<script>
$( document ).ready(function() {
var url = window.location.href; //get current page url
$(".treeview-menu i").each(function() {
if (url == (this.href)) {
$(this).addClass("active"); //add active class to matched LIst item
}
});
});
</script>
<style>
.active{
border-bottom:1px solid red;
}
<script>
$(function() {
// for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// save the latest tab; use cookies if you like 'em better:
localStorage.setItem('lastTab', $(this).attr('href'));
});
// go to the latest tab, if it exists:
var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
$('[href="' + lastTab + '"]').tab('show');
}
});
</script>
I am trying to add a user's profile picture to a dropdown menu using Bootstrap 3.
Here is a code snippet of the dropdown menu currently in my code:
<ul class="nav navbar-right top-nav">
<li class="dropdown">
<i class="fa fa-user"></i>Administrator <b class="caret"></b>
<ul class="dropdown-menu">
<img class="thumbnail" style="height:100px; float-left; margin:10px" src="default.jpg">
<li>
<i class="fa fa-fw fa-user"></i> Profile
</li>
<li>
<i class="fa fa-fw fa-envelope-o"></i>Send email report
</li>
<li>
<i class="fa fa-fw fa-gear"></i> Settings
</li>
<li class="divider"></li>
<li>
<i class="fa fa-fw fa-power-off"></i> Log Out
</li>
</ul>
</li>
</ul>
This is what it currently looks like:
I have tried putting the unordered list inside of a div and gave the div the dropdown class, but this broke the nice style of the links in this menu. Also it would require a lot more formatting to move the list next to the picture.
Is there any way to create a dropdown menu with a picture floated to the left of the list items??
Thank you in advance for any help with this problem.
I currently have the following MVC code.
<li>#Html.ActionLink("Home", "Index", "Home")</li>
This generates the following HTML code
<li>
</li>
How Can I obtain the following HTML code?
<a href="#">
<i class="icon-home icon-white"></i>
Home
</a>
The Solution is to use the Url.Action Method.
<li>
<a href="#Url.Action("Index", "Home")">
<i class="glyphicon glyphicon-home"></i> Home
</a>
</li>
Hopefully it helps others.