/    Sign up×
Community /Pin to ProfileBookmark

Newbie Qs :Need Help with Main Menu drop down

Copy linkTweet thisAlerts:
May 24.2020

I am building a website for a local charity organization. I want the main menu downdrop listing to be similar to that in the following websites. https://www.celltrion.com/en-us/home/index and http://www.globalgreencross.com/eng/index.do Notice that the menu does not open as individual listings but as whole so as display all options at once.
Is this an HTML/CSS code or some sort of plug-in which can be bought online. Looking forward to your kind replies. Thank you.
Dona Paula

to post a comment

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumMay 24.2020 — I've viewed the celltrion site. The dropdown listing is made by use of jQuery. Seems to be a development specific for that site, not a plugin that's available for the public. However the code is fairly simple so that it could be remade easily.
Copy linkTweet thisAlerts:
@SempervivumMay 24.2020 — [[19],[2]]
Copy linkTweet thisAlerts:
@donapaulaauthorMay 25.2020 — Thanks Sempervivum for your reply. Henceforth, I will not double post my queries. Would you be kind enough to point in the right direction to obtain the sample jQuery code ? Much appreciated.

Dona Paula
Copy linkTweet thisAlerts:
@SempervivumMay 25.2020 — Do you already have a basic version of your menu? Then please post the HTML and CSS and I will try to add the jQuery.
Copy linkTweet thisAlerts:
@donapaulaauthorMay 25.2020 — Here is the basic version of the menu. I do not have a CSS. Thanks for your help.

<ul id="abc">

<li>

<a href="/company/aboutus""><span>COMPANY</span></a>

<ul class="sub_abc">

<li><a href="/company/aboutus">About Us</a></li>

<li><a href="/company/Leadership">Leadership</a></li>

<li><a href="/company/management_team">Management Team </a></li>

<li><a href="/company/newsandevents">News & Events </a></li>

<li><a href="/company/careers">Careers </a></li>

<li><a href="/company/contactus">Contact Us</a></li>

<li><a href="/company/responsibility">Social Responsibility </a></li>

</ul>

</li>

<li>

<a href="/services/all"><span>SERVICES</span></a>

<ul class="sub_abc">

<li><a href="/services/all">Prescriptions</a></li>

<li><a href="/services/homedelivery">Home delivery</a></li>

<li><a href="/services/freehealthcamp">Free Health Camp</a></li>

<li><a href="/services/callorderpickup">Call Order Pickup</a></li>

<li><a href="/services/pricematch">Price Match</a></li>

<li><a href="/services/testimonials">Customer Testimonials</a></li>

</ul>

</li>

<li>

<a href="/promotions/all"><span>PROMOTIONS</span></a>

<ul class="sub_abc">

<li><a href="/promotions/all">Discounts</a></li>

<li><a href="/promotions/Coupons">Coupons</a></li>

<li><a href="/promotions/Monthlyspecials">Monthly Specials</a></li>

<li><a href="/promotions/Giftcards">Gift Cards</a></li>

</ul>

</li>

<li><a href="/healthblog/all"><span>HEALTH BLOG</span></a></li>

<li>

<a href="/partnership/all"><span>PARTNERSHIP</span></a>

<ul class="sub_abc">

<li><a href="/partnership/all">Franchise</a></li>

<li><a href="/partnership/Investwithus">Invest with us</a></li>

<li><a href="/partnership/sellyourpharmacy">Sell your Pharmacy</a></li>

</ul>

</li>

<li>

<a href="/storelocator/all"><span>STORE LOCATOR</span></a>

<ul class="sub_abc">

<li><a href="/storelocator/yourneareststore">Your nearest store </a></li>

<li><a href="/storelocator/all">Store Search</a></li>

</ul>

</li>

</ul>
Copy linkTweet thisAlerts:
@SempervivumMay 25.2020 — Try this javascript:
&lt;script&gt;
const topul = document.querySelector('ul#abc');
const childuls = document.querySelectorAll('ul#abc ul');
topul.addEventListener('mouseover', () =&gt; {
childuls.forEach((item, idx) =&gt; {
item.style.height = item.scrollHeight + 'px';
});
});
topul.addEventListener('mouseout', () =&gt; {
childuls.forEach((item, idx) =&gt; {
item.style.height = '0px';
});
});
&lt;/script&gt;
No jQuery needed.

I used this CSS for testing:
&lt;style&gt;
ul#abc&gt;li&gt;ul {
height: 0;
overflow: hidden;
transition: height 0.5s;
}

<i> </i> ul#abc {
<i> </i> display: flex;
<i> </i> background-color: lightgray;
<i> </i> }

<i> </i> ul {
<i> </i> list-style-type: none;
<i> </i> margin: 0;
<i> </i> padding: 0;
<i> </i> }

<i> </i> li {
<i> </i> padding: 0.5em;
<i> </i> }
<i> </i>&lt;/style&gt;
×

Success!

Help @donapaula spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.10,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...