I'm working on navigation bar and I got a problem that is responsive related.
I want the sub menu box to keep inside the content always. I must not go to the grey area. Is there a way to do this? I would prefer to keep the size of the sub menu box
This is my code:(I'm using Umbraco)
HTML:
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{ var home = CurrentPage.Site(); }
#if (home.Children.Any())
{
#* Get the first page in the children *#
var naviLevel = home.Children.First().Level;
#* Add in level for a CSS hook *#
<div class="linje"></div>
<ul class="meny level-#naviLevel">
#* For each child page under the home node *#
#foreach (var childPage in home.Children)
{
if (childPage.Children.Any())
{
<li class="dropdown has-child #(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
#if (childPage.DocumentTypeAlias == "Huvudmeny")
{
<span>#childPage.Name</span>
#childPages(childPage.Children)
}
else
{
#childPage.Name
}
#helper childPages(dynamic pages)
{
#* Ensure that we have a collection of pages *#
if (pages.Any())
{
#* Get the first page in pages and get the level *#
var naviLevel = pages.First().Level;
#* Add in level for a CSS hook *#
<ul class="meny dropdown-menu sublevel level-#(naviLevel)">
#foreach (var page in pages)
{
<li>
#page.Name
#* if the current page has any children *#
#if (page.Children.Any())
{
#* Call our helper to display the children *#
#childPages(page.Children)
}
</li>
}
</ul>
}
}
</li>
}
else
{
<li class="#(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
#childPage.Name
</li>
}
}
</ul>
<div class="linje col-md-12" ></div>
}
CSS:
nav .has-child:hover > .sublevel {
display: block;
width: 500px;
height: 200px;
}
ul.dropdown-menu>li { float: left; width: 50% !important; }
ul.dropdown-menu{
width:500px;
}
Related
For some reason, I cant close li tag, I added comment which li tag is in question inside code
<ul>
#foreach (var item in #ViewBag.kategorije) {
<li>
#item.Name #if (item.ChildCategory.Count > 0) { foreach (var child in item.ChildCategory) {
<li class="child">
#child.Name
</li>
} }
</li>
<!-- it says this tag has no matching start tag -->
}
</ul>
Ooops, found it, I needed to nest child list elements into new ul, basic html mistake
<ul>
#foreach (var item in #ViewBag.kategorije)
{
<li>
#item.Name
if (item.ChildCategory.Count > 0)
{ <ul>
foreach (var child in item.ChildCategory)
{
<li class="child">
#child.Name
</li>
}
</ul>
}
</li>
}
</ul>
When wrapping my MultiURL picker within a div tag, it breaks the page, has anyone seen this type of behaviour before when creating new templates in Umbraco?
If anyone has experienced this before and can share a fix, that would be much appreciated.
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#using Archetype.Models;
#using Archetype.Extensions;
#using RJP.MultiUrlPicker.Models;
#{
Layout = "Master.cshtml";
}
<div class="container">
<div class="row">
<h1>#Umbraco.Field("pageTitle")</h1>
<p>#Umbraco.Field("pageBodyText")</p>
#foreach (var fieldset in Model.Content.GetPropertyValue<ArchetypeModel>("box"))
{
<div class="THIS-DIV">
<h3>#fieldset.GetValue("boxTitle")</h3>
<img src="#Umbraco.TypedMedia(fieldset.GetValue("boxImage")).Url" />
var multiUrlPicker = fieldset.GetValue<MultiUrls>("boxLink");
if (multiUrlPicker.Any())
{
<ul>
#foreach (var item in multiUrlPicker)
{
<li>#item.Name</li>
}
</ul>
}
</div>
}
I think that the line starting with var multiUrlPicker is being interpreted as html and not as code, try wrapping your code between #{ and }
<div class="THIS-DIV">
#{
var multiUrlPicker = fieldset.GetValue<MultiUrls>("boxLink");
if (multiUrlPicker.Any())
{
<ul>
#foreach (var item in multiUrlPicker)
{
<li>#item.Name</li>
}
</ul>
}
}
</div>
I am using Bootstrap Scrollspy. I added one Bootstrap nav (class = "nav nav-pills nav-stackedon") on left side of page and was on right side. First problem was that nav becomes invisible as I scroll down, so I added style to it:
.my-navbar {
position:fixed;
}
Then everything was fine with navbar (it became fixed to top), but the problem is that the body is now below navbar instead of being on right side of it. Why is that so and how to correct it?
My view is here:
#model Questionnaire.Domain.Models.StudentVM
#using System.Linq
#using System.Collections.Generic
#{
ViewBag.Title = "Student";
}
#{
List<String> subjectNames = new List<String>();
for (int i = 0; i < Model.Subjects.Count; i++)
{
subjectNames.Add(Model.Subjects[i].Name);
}
}
<body data-spy="scroll" data-target=".my-navbar">
<div class="row panel">
<div class="my-navbar col-xs-2">
<ul class="nav nav-pills nav-stacked">
<li role="presentation">Opšta pitanja</li>
#for (int i = 1; i < subjectNames.Count; i++)
{
<li role="presentation">#subjectNames[i]</li>
}
</ul>
</div>
<div class="col-xs-8">
#using (Html.BeginForm())
{
<span id="opsta"></span>
for (int i = 0; i < Model.Subjects.Count; i++)
{
<div class="well well-outside">
#Html.HiddenFor(m => m.Subjects[i].ID)
<h3>#Html.DisplayFor(m => m.Subjects[i].Name)</h3>
#for (int j = 0; j < Model.Subjects[i].Questions.Count; j++)
{
<div class="well well-inside">
#Html.HiddenFor(m => m.Subjects[i].Questions[j].ID)
<h3>#Html.DisplayFor(m => m.Subjects[i].Questions[j].Text)</h3>
#foreach (var answer in Model.Subjects[i].Questions[j].PossibleAnswers)
{
<div>
#Html.RadioButtonFor(m => m.Subjects[i].Questions[j].SelectedAnswer, answer.ID, new { id = answer.ID })
<label for="#answer.ID">#answer.Text</label>
</div>
}
#Html.ValidationMessageFor(m => m.Subjects[i].Questions[j].SelectedAnswer)
</div>
}
</div>
}
<input type="submit" class="btn btn-success" value="Confirm" />
}
</div>
</div>
</body>
setting position:fixed removes the nav bar from the regular flow of the page, so the page acts like nothing is there in its place. You can either style the rest of the page to act as if it is there (margin, padding, other) or put an empty container in its place with similar dimension, just no content.
Here is my code:
a) I have a row of buttons at the top formatted horizontally as such:
HTML:
<ul class="nav">
Work
Volunteer
Education
Skills
References
Images
</ul>
b) I have div blocks each displaying a paragraph:
<div class="jobs">
<h2>text</h2>
<h3>text</h3>
<h4>text</h4>
</div>
c) I want the CSS to not display the jobs div yet:
.jobs {
display: none;
}
d) Now that I hover over the first button I want the jobs div to display:
.button1:hover+.jobs {
display: block
}
e) Repeat for all other div sections
.volunteer {
display: none;
}
.button2:hover+.volunteer {
display:block
}
You will need to markup HTML differently.
.jobs, .volunteer {
display: none;
}
.button1:hover+.jobs, .button2:hover+.volunteer {
display: block;
/* position the divs under the navigation links */
position: absolute;
top: 120px;
}
<ul class="nav">
<li>
Work
<div class="jobs">
<h2>h2 jobs</h2>
<h3>h3 jobs</h3>
<h4>h4 jobs</h4>
</div>
</li>
<li>
Volunteer
<div class="volunteer">
<h2>h2 volunteer</h2>
<h3>h3 volunteer</h3>
<h4>h4 volunteer</h4>
</div>
</li>
<li> Education</li>
<li> Skills</li>
<li> References</li>
<li> Images</li>
</ul>
This is impossible, as described, with your current HTML, with only HTML and CSS (though only perhaps until the reference and :matches() pseudo-selectors arrive). However, if, rather than :hover you'd be willing to work with clicks on the list-elements, it can be done (without JavaScript). Given the corrected HTML:
<ul class="nav">
<li>Work
</li>
<li> Volunteer
</li>
<!-- and so on... -->
</ul>
<div id="details">
<div id="jobs"></div>
<div id="volunteer"></div>
<!-- and so on... -->
</div>
The following CSS will show the relevant div element once the <a> element has been clicked on (note that the use of an id is essential for this to work):
#details > div {
/* to hide the eleemnt(s) initially: */
display: none;
}
#details > div:target {
/* to show the relevant element once the relevant link is clicked: */
display: block;
}
#details > div[id]::after {
content: attr(id);
}
#details > div {
display: none;
}
#details > div:target {
display: block;
}
<ul class="nav">
<li>Work
</li>
<li> Volunteer
</li>
<li> Education
</li>
<li> Skills
</li>
<li> References
</li>
<li> Images
</li>
</ul>
<div id="details">
<div id="jobs"></div>
<div id="volunteer"></div>
<div id="education"></div>
<div id="skills"></div>
<div id="references"></div>
<div id="images"></div>
</div>
With plain JavaScript, on the other hand, it can be achieved with:
// the 'e' argument is automatically to the function by addEventListener():
function toggleRelevant (e) {
// caching the 'this' element:
var self = this,
// finding the div element with a class equal to the href of the 'a' element
// (though we're stripping off the leading '#':
relevantElement = document.querySelector('div.' + self.getAttribute('href').substring(1) );
// if the event we're responding to is 'mouseover' we set the display of the
// found div to 'block', otherwise we set it to 'none':
relevantElement.style.display = e.type === 'mouseover' ? 'block' : 'none';
}
// finding all the a elements that are in li elements:
var links = document.querySelectorAll('li a');
// iterating over those a elements, using Array.prototype.forEach:
[].forEach.call(links, function(linkElem){
// adding the same event-handler for both mouseover and mouseout:
linkElem.addEventListener('mouseover', toggleRelevant);
linkElem.addEventListener('mouseout', toggleRelevant);
});
function toggleRelevant(e) {
var self = this,
relevantElement = document.querySelector('div.' + self.getAttribute('href').substring(1));
relevantElement.style.display = e.type === 'mouseover' ? 'block' : 'none';
}
var links = document.querySelectorAll('li a');
[].forEach.call(links, function(linkElem) {
linkElem.addEventListener('mouseover', toggleRelevant);
linkElem.addEventListener('mouseout', toggleRelevant);
});
div[class] {
display: none;
}
div[class]::before {
content: attr(class);
color: #f00;
border: 1px solid #f00;
padding: 0.2em;
}
<ul class="nav">
<li>Work
</li>
<li> Volunteer
</li>
<!-- and so on... -->
</ul>
<div class="jobs">
<h2>text</h2>
<h3>text</h3>
<h4>text</h4>
</div>
<div class="volunteer">
<h2>text</h2>
<h3>text</h3>
<h4>text</h4>
</div>
<!-- and so on... -->
I don't think this is do able in css since display blocks (job, volonteer, ...) and button are not parent. But in jQuery this is fairly simple :
$('.buttonX').hover(
function() {
// Styles to show the box
$('.boxX').css(...);
},
function () {
// Styles to hide the box
$('.boxX').css(...);
}
);
It sounds like you're trying to do some kind of a tab menu where pressing a specific button shows a different content. Here's a SO page that describes how it's done: How to make UL Tabs with only HTML CSS
Currently, I am using something like
<li class="active">Home</li>
<li>A</li>
<li>B</li>
<li>C</li>
where I have four html files index.html, a.html, b.html and c.html, which are selected based on the links clicked.
Instead, I want to have the content all in the same HTML file with common headers and footers and just selectively display content depending on which button was clicked.
How can I do that?
you can do this
put content of each page in div has unique id and display all none and each a in li have id of div
html
<li><a class="div1" href="#1">A</a></li>
<li><a class="div2" href="#2">B</a></li>
<li><a class="div3" href="#3">C</a></li>
<div id="1" class="hide" style=" width:100%; height: 100px; background-color:red; "></div>
<div id="2" class="hide" style=" width:100%; height: 100px; background-color:gold; "></div>
CSS
.hide
{
display:none;
}
JS
<script>
$(function () {
$('li').on('click', function (e) {
var href = $(this).find('a').attr('href');
window.location.hash = href;
});
$('.div1').on('click', function (e) {
$("#1").removeClass("hide");
$("#2").addClass("hide");
$("#3").addClass("hide");
});
$('.div2').on('click', function (e) {
$("#2").removeClass("hide");
$("#1").addClass("hide");
$("#3").addClass("hide");
});
$('.div3').on('click', function (e) {
$("#3").removeClass("hide");
$("#1").addClass("hide");
$("#2").addClass("hide");
});
if (window.location.hash == "#1") {
$("#1").removeClass("hide");
$("#3").addClass("hide");
$("#2").addClass("hide");
}
if (window.location.hash == "#2") {
$("#2").removeClass("hide");
$("#3").addClass("hide");
$("#1").addClass("hide");
}
if (window.location.hash == "#3") {
$("#3").removeClass("hide");
$("#1").addClass("hide");
$("#2").addClass("hide");
}
});
</script>