put html menu on jsfiddle. unclosed regular expression - html

I can not run this code. I have unclosed regular expression from what I see all tags are closed correctly. Maybe at the end of the confusion but the system shows an error even at the beginning of the code.
jsfiddle.net/n5u2wwjg/176703/
on codepen its works codepen.io/romanown/pen/PdERze


There are some closing tags missing - Correct your render()
<div>
<ul class="top-menu">
<li>
Главная home page
</li>
<li>
Портфолио
</li>
<li>
<div>
Shops
</div>
<ul class="submenu">
<li> Column 1
<ul>
<li>
Element of list
</li>
<li>
Element of list
</li>
<li>
Элемент списка
</li>
<li>
Элемент списка
</li>
<li>
Элемент списка
</li>
<li>
Элемент списка
</li>
<li>
Элемент списка
</li>
<li>
Элемент списка
</li>
</ul>
</li>
<li>
<ul>
<ul>
<li>
<a href="" class="link-image">
<img src="https://html5book.ru/wp-content/uploads/2017/01/white-lady.jpg" />
</a>
</li>
<li>
<h3 class="image-header">Header of picture</h3>
</li>
</ul>
</ul>
<li>
Блог
</li>
</li>
</ul>
</li>
</ul>
</div>

Related

Positioning sidebar and article below navbar with html and css

with this html code:
<header>
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
</header>
<main>
<nav>
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
</nav>
<article>
<section>
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
</section>
<section>
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
</section>
<section>
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
</section>
<section>
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
</section>
<section>
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
</section>
</article>
</main>
<footer>
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
</footer>
I am trying write a css for acomplish this things:
one fixed navbar on top (already ok)
main area with a sidebar and an "article" area (need fix position and alignment of its parts)
the article area needs to be placed to the roght of the sidebar, but right now it's been displayed on the bottom of it.
footer has some strange banner been displayed below (only when mouse cursor is not hovering it) like it's showing here:
https://jsfiddle.net/klebermo/5axmocwp/1/
Anyone can give some hints of how to fix that?

May be this is what you want? I only change this in css:
main {
margin-top: 32px;
/* below lines was added */
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
footer {
left: 0;
bottom: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
/* below line was added */
height: 50px;
}
Here is example. I use flexbox in this solution - great tutorial about this is HERE - however you can also use even better tool for layouts: GRID.
Suggestion: use class attribute in html and then use that class name in css - direct html tag names in css is not good practice - if possible avoid it

My nested dropdown menus are not coming on bringing mouse over in navigation bar while designing a website

I have started designing a website using HTML CSS Bootstrap and while making navigation menu dropdown menu is not coming on bringing mouse over instead its showing under it
I am hereby attaching the required code
<ul class="main-menu sf-menu">
<li class="active">Home</li>
<li>Know Your AO/Region/Branch
</li>
<li>HR Section
</li>
<li>General Banking
<ul>
<li> RajBhasha </li>
<li> Security </li>
<li> Miscellaneous </li>
</ul>
</li>
</li>
<li> Advances </li>
<li>IT Section
</li>
<li>Regions
<ul>
<li>Region 1:Nainital </li>
<li>Region 2: Almora </li>
<li>Region 3: Pithoragarh and Champawat </li>
<li>Region 4: Bageshwar and Chamoli </li>
<li>Region 5: Udham Singh Nagar </li>
</ul>
</li>
<li>News
</li>
</li>
<li>Staff Corner</li>
</ul> <!-- /.main-menu -->
</nav>
The result is like thisenter image description here
Please Help....

First add class "dropdwon" in li which you want to make dropdown. Second add class "dropdown-menu" on ul
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<nav>
<ul class="nav navbar-nav mainNavigation">
<li class="active">Home </li>
<li> About Us </li>
<li> Marketing Services </li>
<li> IT Management Services </li>
<li class="dropdown"> Molex Portfolio
<ul class="dropdown-menu">
<li> Fibre Products </li>
<li> Copper Products </li>
</ul>
</li>
<li>Contact Us </li>
<li> Employment Opp </li>
</ul>
</nav>
</div>
and add this css
.dropdown:hover .dropdown-menu{ display:block; }

how to make a menu highlighted while pointing sub menu?

I am making a menu bar with sub menus. what i need while hovering mouse to menu the sub menu will appear and menu has to be highlighted. Please help me.....
<div class="side-bar">
<ul class="">
<li>Home
</li>
<li>About Us
</li>
<li>Portfolio
<ul>
<li>SELECTED PROJECTS
</li>
<li>program
<!-- i need this to be highlighted while cursoring sub menu -->
<ul>
<li>RESIDENTIAL
</li>
<li>HOSPITALITY
</li>
<li>INSTITUTION &AMP; COMMERCIAL
</li>
<li>INFRASTRUCTURE
</li>
<li>EDUCATIONAL
</li>
<li>COMMUNITY
</li>
<li>HEALTHCARE
</li>
<li>FACTORY
</li>
<li>FARM HOUSES
</li>
<li>PRIVATE RESIDENCES
</li>
<li>INTERIORS
</li>
</ul>
</li>
<li>chronological
</li>
</ul>
</li>
<li>services
</li>
<li>news
</li>
<li>Press
</li>
<li>D [+] DR
</li>
<li>Careers
</li>
<li>Contact Us
</li>
</ul>
</div>

You can simply do that using CSS, so try this:
li:hover > a {
/* Selects all <a> elements that are placed immediately after <li> which is hovered */
color: #FFF; /* or any code you want */
}
So if the mouse is over the li itself it will be highlighted, also if it's over ul or li inside the first li it will be also highlighted
Hope this will help you ..

Insert a div class inside wordpress menu

<ul id="menu">
<li>About Assetline
<li>Products & Services
<div id="mega">
<ul>
<li>Commercial Credit</li>
</ul>
<ul>
<li>Portfolio Management</li>
</ul>
</div><!--mega-->
</li>
<li>News & Events
</ul>
This is the menu structure what I want to integrate into WordPress . But there's an issue to add a div id ( ) inside of a menu . Any idea to achieve this ?

You forgot to close some of your first li tags. If that does work, remove the div, and assign the id in the child ul.
<ul>
<li>
<a>level 1</a>
<ul id="mega">
<li>
<a>level 2 A</a>
</li>
<li>
<a>level 2 B</a>
<ul>
<li>
<a>level 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>

Simulate hover on superfish menu

I want to open one of the submenus of a superfish menu with an event. For example with a button and "onclick". And i want it to stay opened until you press a Close button
How could i do that? Can i call a "hover event" function from the superfish.js somehow?
<ul class="sf-menu">
<li class="current" id="qwqw">
ThisToHover(forexample)
<ul >
<li>
Ismertető
</li>
<li class="current">
Cégtörténet
</li>
<li>
Telephely
</li>
<li>
ISO
</li>
<li>
Referecciák
</li>
</ul>
</li>
<li>
menu
<ul>
<li>Teherfuvarozás</li>
<li>Gépszállítás</li>
<li>Gépbérlet
<ul>
<li>Subsubmenu</li>
<li>Nyan Cat</li>
</ul>
</li>
<li>Gépi Földmunka</li>
<li>Bontás</li>
<li>Lorem Ipsum</li>
</ul>
</li>
<li>
menu
</li>
<li>
menu
</li>
</ul>

it was so much easier than I thought.
Simply had to add class 'sfHover'
document.getElementById('qwqw').className='sfHover';
...for example.